Download
1 / 32
320 likes | 326 Vues
HTML. For the World Wide Web. Create a HTML file using a Text Editor. We will use Notepad to create our HTML files Left Click on the start button Left Click on All Programs Left Click on Accessories Right Click on Notepad Hover over Send to Right Click on Desktop (create shortcut)
E N D
HTML For the World Wide Web
Create a HTML file using a Text Editor • We will use Notepad to create our HTML files • Left Click on the start button • Left Click on All Programs • Left Click on Accessories • Right Click on Notepad • Hover over Send to • Right Click on Desktop (create shortcut) • Open Notepad from your Desktop
What is HTML? • Hypertext Mark-up Language • Simple text file • Describes the content and structure of a document • HTML code is a way of telling a browser how to display content on a web page. • The basic element in HTML is a tag • Control the content displayed • Control the layout of the page • Control the links to other pages
Basic HTML • Tags – used to define how a web page displays in a browser • Element – A distinct object in a Web document like a paragraph, heading or title. • Attributes – part of a tag that controls the use, behavior and appearance of an element. • Look on p. 430 in HTML for the World Wide Web.
Tag Structure • Most Tags come in pairs Opening tag <tag> The information between the tags will determine the look and content of the web page. Closing tag </tag> • There are a few Tags that are single • <br /> inserts a line break • <hr /> draws a horizontal line
Common Tags • Anchor tag- for creating links and anchors <a>http://www.robpolete.wordpress.com</a> • Paragraph tag – for creating paragraphs <p>Whatever you type between these tags will appear as a paragraph on your web page</p> • Image tag – for inserting images <img src=http://photo1.kodak.com /> • Title tag – for creating web page titles <title>Creates a Title</title>
Basic Structure of HTML <html> Root Element – Containing all of the document content <head> Head Element – Containing Header Content </head> <body> Body Element – Containing Body Content </body> </html>
Create a HTML file • Type the html opening tag <html> enter • Type the head opening tag <head> enter • Tab and type the title opening tag <title> • Type the page title Dave’s Devil Sticks • Type the title closing tag </title> enter • Type the head closing tag </head> enter • Type the body opening tag <body> enter • Type the body closing tag </body> enter • Type the html closing tag </html> • Click Save at the top of your file • Click on the arrow on Save as type and select All Files • Name your file dave.htm
This is what it should look like <html> <head> <title>Dave’s Devil Sticks</title> </head> <body> </body> </html>
Adding Comments to your Code • You can leave yourself and others notes about what is happening in your HTML code by using Comments <!--Comment Tags --> <!--Whatever you type between these tags will not affect the Web page but will be visible when you read the HTML code. This way you can leave yourself reminders about what different parts of your code is doing.-->
Add a Comment <html> <head> <!–- Dave’s Devil Sticks Author: Your Name Date: Today’s Date --> <title>Dave’s Devil Sticks</title> </head> <body> </body> </html> Save your file dave2
View Your File • Start your web browser • Click on File in the Tool Bar • Click on Browse • What do you see?
Headers • There are six different sizes of headers available in HTML • The text size gets smaller as the number gets larger h1 h2 h3 h4 h5 h6
Add a Header to the Page • Insert the following between the opening and closing <body> tag. Indent your headers so that you can see they are part of the body. <body> <h1>Dave’s Devil Sticks</h1> <h2>Who Am I?</h2> <h2>My Products</h2> </body> • Save your file and reload your browser. dave3
Add a Paragraph • The <p> tag inserts a paragraph. Any characters between the opening and closing <p> tags will appear as a paragraph on the web page. • Directly below the "Who Am I" heading enter the following: <p>Welcome to Dave's Devil Sticks. If you're looking for high-quality, hand-crafted devil and flower sticks, this is the site for you. I've been designing and building sticks for the past 20 years, and I know that my sticks are the best of their kind. </p> <p>Every set is checked and tested before being shipped out to assure perfect quality. I take pride in every one of my sticks and I want my customers to feel that same pride.</p> • Save your file and refresh your browser dave4
White Space in HTML Files • Notice that the line wrapping in your HTML file do not match the wrapping on the browser rendered page.
Make a List • There are two kinds of lists in HTML • Ordered – A list with numbers or letters preceding each list item <ol> <li>First Item</li> <li>Second Item</li> </ol> • Unordered- A list with bullets preceding each list item. <ul> <li>First Item</li> <li>Second Item</li> </ul>
Add A List to Dave’s Site • Directly below the My Products heading insert the following: <ul> <li>Basic Stick</li> <li>Flower Stick</li> <li>Master Stick</li> <li>Glow Stick</li> </ul> dave5
Make Text Bold • Insert the <b> tag on each list item. <ul> <li><b>Basic Stick</b></li> <li><b>Flower Stick</b></li> <li><b>Master Stick</b></li> <li><b>Glow Stick</b></li> </ul>
Add an Address • Directly above the </body> tag insert the following: <address>Dave’s Sticks 541 West Highland Dr. Auburn, ME 04210 (207) 555-9001 </address>
Add a Description for each Product • Locate the </b> tag on the Basic Stick list item press enter and type the following: • Basic Stick</b> The easiest stick to learn with, but "grippy" enough for the most demanding tricks. Comes in red, green, and blue. • Do the same for each of the remaining list items: • Flower Sticks</b> A graceful stick with colored tassels. Flower Sticks float more slowly, giving you the ideal chance to practice new moves. • Master Sticks</b> My most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master stick is available in custom colors. • Glow Sticks</b> The Glow Stick shines brightly at night (without the danger of a fire stick). It combines the fun and versatility of the Master Stick, adding the fun tricks unique to a glow-in-the-dark stick.
<ul> <li><b>Basic Stick</b> The easiest stick to learn with, but "grippy" enough for the most demanding tricks. Comes in red, green, and blue. </li> <li><b>Flower Stick</b> A graceful stick with colored tassels. Flower Sticks float more slowly, giving you the ideal chance to practice new moves. </li> <li><b>Master Stick</b> My most popular stick is shorter and heaver for fast play and more advanced tricks. Each Master stick is available in custom colors. </li> <li><b>Glow Stick</b> The Glow Stick shines brightly at night (without the danger of a fire stick). It combines the fun and versatility of the Master Stick, adding the fun tricks unique to a glow-in- the-dark stick. </li> </ul>
Add a Line Break • Insert the <br/> tag after the </b> tag following each product name to insert a line break.
<ul> <li><b>Basic Stick</b><br/>The easiest stick to learn with, but "grippy" enough for the most demanding tricks. Comes in red, green, and blue. </li> <li><b>Flower Stick</b><br/> A graceful stick with colored tassels. Flower Sticks float more slowly, giving you the ideal chance to practice new moves. </li> <li><b>Master Stick</b><br/> My most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master stick is available in custom colors. </li> <li><b>Glow Stick</b><br/> The Glow Stick shines brightly at night (without the danger of a fire stick). It combines the fun and versatility of the Master Stick, adding the fun tricks unique to a glow-in-the-dark stick. </li> </ul>
Add a Block Quote • Block Quotes indent text to set it off from other information on your page. • At the end of the first paragraph add the following block quote. <blockquote> <p>I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. I’ve been using his sticks in my shows ever since. They’re durable, well-balanced, and attractive props and are the perfect compliment to my performances. Thanks Dave!</p> <p>Thomas Gage, lead performer at Circus England</p> </blockquote>
Change Text Formating • Make Dave’s Devil Sticks in the first paragraph bold by inserting the <b> and </b> tags around the text. <b>Dave’s Devil Sticks</b> • Make Circus England italic by inserting the <i> and </i> tags around the text. <i>Circus England</i>
Add Horizontal Lines • Directly below the opening <blockquote> tag add a <hr/> tag. • Insert another <hr/> tag directly above the closing </blockquote>tag • Insert another <hr/> tag above the opening <address> tag
Center the Address • Use the style attribute for the <address>tag to center the address text on the page. <address style="text-align: center">
Special Characters • Look on p. 450 in the HTML book. This is a list of special characters that are available to insert in your web page. • Find the code for a bullet under the Punctuation Characters on p. 452. • Find the code for an em-dash
Add an em-dash and bullet • em-dash <p>— Thomas Gage, lead performer at Circus England</p> • bullet <address style="text-align: center">Dave’s Sticks • 541 West Highland Dr. • Auburn, ME 04210 • (207) 555-9001 • </address>
Add Dave’s Logo • Go to the class website and save a copy of Dave’s logo to a new folder called Dave. • Move your dave.htm file to the new folder too. • For your browser to link the photo file and the .htm file they must be in the same folder.
Add the Image to your Web Page • Below the opening <body> tag add the following: <h1 style="text-align: center"> <img src="daves-logo.jpg" alt= "Dave’s Devil Sticks" /> </h1> Save you file and refresh your browser.
