Embed Size (px)
Citation preview
Introduction to HTML :Hyper Text Markup
Language
Tips and Tricks
Screen Capture - - Shift / Command / 3 View Source - - From Browser View
Page Source Capture Images From Internet - - Click Know Your Browser!
– Set your own preferences Drop and Drag images into the
browser window
Writing HTML
Tags -- <command> <head> <title>Teaching Centers</title> </head> <body bgcolor=#ffffff> Open a word processing file. Enter
the commands (starting with <head>) and save as a TEXT file …. Myfile.html
A First Attempt
Open your browser …. You do not need to be connected to the Internet.
Drag the “icon” for your file into the window of your browser. You should see a white background.
Modify the last command to <body bgcolor=“your last name”>
Drag the file into the browser window
An Operating Strategy
I recommend that you begin your development without being on the Internet.
Experiment with the following commands. Add the commands, save the file, and drag to your browser window. Make sure that you understand what the commands are doing.
COMMANDS
Some turn <on> only– <p> new paragraph– <br> line break
Some turn on <on> and off </on> Try the following: This is my first set of
commands<p> And this is the second<p>
<b>BOLD</b> Try <b>HI!</b> <i>ITALICS</i> Try <I>HI!</I> Lists - Add to your file
– <ol> ordered list </ol>– <ol>– <li>Green– <li>Blue– </ol>
<ul>Unordered List - Symbols</ul>– <ul>– <li>Green– <li>Red– <li>Blue– </ul>
Try the above - replace <ul> with <ol> and </ul> with </ol> and try again
NESTED LISTS
<ol type=A> <li>University Experience <ul><li>University of Mars <li>University of Houston </ul> <li>Company Experience <ul><li>Quaker Oats ……… </ul></ol>
IMAGES
Obtain a copy of the image wave.gif Try <img src=“wave.gif”> Try <img border = 1
align=“right”> src=“wave.gif” <center><img src=“wave.gif”>
</center> BE CONSISTENT IN NAMING FILES
– Always use lower case
LINKS
Connect to the Internet ……. <a href=“http://www.uh.edu/~jbutler/file. html”><b>Link Name</b></a>– Where http is the protocol– www.uh.edu is the server address– ~jbutler is the directory– file.html is the file name
Add this line to your file.
FONTS and COLORS
<font size = +1> … </font size> <font face=“symbol”> … </font
face> <font color=“red”> … </font color> Try the following …... This color is <font
color=“red”><b>red</b></font color> and not <b>black</b>.
HEADINGS
<H1>Heading</H1> <H2>Heading</H2> <H3>Heading</H3> <H4>Heading</H4> <H5>Heading</H5> <H6>Heading</H6>
Try these in your file
![[ (Hyper Text Markup Language(html · [ (Hyper Text Markup Language(html] ٣Page [ﮫﻣودﻟا نﻣﺣرﻟا ﺢﺗﻓ /قﯾﺳﻧﺗ]:ﮫﻐﻠﻟا تاﺰﯿﻤﻣ ﺂﯿﻧﺎﺛ:ﮫﻐﻠﻟا](https://img.pdfslide.net/doc/110x75/5ee0292cad6a402d666b6611/-hyper-text-markup-languagehtml-hyper-text-markup-languagehtml-page-iii.jpg)
![1 Hyper Text Markup Language (HTML) UNIT- 02 Hyper Text Markup Language (HTML) UNIT-02/LECTURE-01 Introduction to Hyper Text Markup Language (HTML) About HTML: [RGPV/Dec 2013(4)] So](https://img.pdfslide.net/doc/110x75/5aae4bc17f8b9a25088c15fa/1-hyper-text-markup-language-html-unit-02-hyper-text-markup-language-html-unit-02lecture-01.jpg)
![แนะนำการเขียน HTML [2] (Hyper Text Markup Language)](https://img.pdfslide.net/doc/110x75/56815e80550346895dcd0dd2/-html-2-hyper-text-markup-language.jpg)
