250 likes | 360 Views
BEGINNING HTML. DESIGNING YOUR OWN WWW PAGES. What is HTML?. Hypertext Markup Language Used to create documents for the WWW Structure is important. Starting a WWW page. Start a WWW page by declaring itself <html> End a WWW page by terminating itself </html>.
E N D
BEGINNING HTML DESIGNING YOUR OWN WWW PAGES
What is HTML? • Hypertext Markup Language • Used to create documents for the WWW • Structure is important
Starting a WWW page • Start a WWW page by declaring itself <html> • End a WWW page by terminating itself </html>
Parts of a HTML document • <html> • Heading • Title • Body • </html>
General Command Format • Not case sensitive • Tabs and Returns are not recognized • Commands start with a < and end with a > • There is a beginning and an ending to most command structures • The / symbol is used to terminate a command structure
The Heading • <head> • <title> • Title of your WWW page • </title> • </head>
The Body • Starts with: <body> • Heading Levels • Paragraphs • Lists • Links • Ends with: </body>
The Body: Heading Levels • Six heading levels: h1 to h6 • General format • <hx> and </hx> where x is the heading level 1..6 • Level 1 is the largest font size and 6 the smallest • Example: <h1>My First Page </h1>
The Body: Paragraphs • Used to separate paragraphs • General format • <p> • This is your paragraph • </p>
The Body: Lists • Three kinds of lists • Ordered Numbered • Unordered Bullets • Definition Explanatory List
Lists : Ordered • Numbered • General Format • Begins with <ol> and ends with </ol> • Individual items in the list are designated with a <li> in front of them. (NOTE: there is no </li>) • Example: <ol> <li> Chapter 1 <li> Chapter 2 </ol>
Lists: Unordered • Bullets • General Format • Begins with <ul> and ends with </ul> • Individual items in the list are designated with a <li> in front of them. (NOTE: there is no </li>) • Example: <ul> <li> Chapter 1 <li> Chapter 2 </ul>
Ordered My first WWW page This is your paragraph 1. Chapter 1 2. Chapter 2 Unordered My first WWW page This is your paragraph • Chapter 1 • Chapter 2 Examples
Lists: Definition • Bullets • General Format • Begins with <dl> and ends with </dl> • Individual items in the list have two parts • Term <dt> (NOTE: there is no </dt>) • Definition <dd> (NOTE: there is no </dd>) • Example: <dl> <dt> Chapter 1 <dd> Keys to Success </dl>
The Body: Links • Four types • Page • Images - still • Images - motion • Sound
Links: Page • URL - Uniform Resource Locator • Internet protocol used to reach document or resource • Address of a document or resource • protocol://machine.name.directory/document • http://www.bps.k12.nd.us
Links: Page • General Format • < a href = “URL” > text of link </a> • The text of link is the part that the users will click or select to activate the link • Example: • < a href = “http://www.bps.k12.nd.us”>Dakota RoughRider </a>
Links: Images - Still • Image must be in GIF or JPEG format • Image must be in same folder as your html file • General Format • < img src = “image name.gif”> optional caption • Example: • < img src = “parrot.gif”> This is a parrot
Links: Images - Still • Options • Image alignment - top, middle or bottom • Aligns base of the image with the base line of the surrounding text • General Format: • <img align = “alignment” src = ““image name.gif”> optional caption • Example: • < img align= “middle” src = “parrot . gif”> parrot
Links: Images - Motion • Image should be in MPEG format • Image must be in same folder as you html file • General Format • < a href=“image name.mpeg”> text of link < /a > • Example: • < a href= “birds.mpeg” > Parrots in flight < /a >
Links: Sound • Sound should be in AU format • Image must be in same folder as you html file • General Format • < a href=“sound name.au”> text of link < /a > • Example: • < a href= “brdsnd.au” > Sounds of parrots < /a >
Extras • Bold < b > text < /b > • Italic < i > text < /i > • Center < center > text or image < /center >
General Overview < html > < head > < title > Ostrich < /title > < /head > < body > text for your page < /body > < /html >