Downloaded 24 times
Uploaded byMichael Sturgeon
HTML Coding #01 : Don't Fear the Code
This document provides an overview of HTML by explaining what HTML is, its timeline and evolution, basic webpage structure using HTML tags, common formatting tags like bold and italics, header tags from H1 to H6, how CSS fits into webpage design, the importance of an index page, and assigns students to create their first basic webpage with paragraphs and tags.
More Related Content
Similar to HTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the Code
- 2. WHAT IS HTML? HTML HyperTextMarkup Language
- 3. HTML TIMELINE HTML: 1.0version (HTML Tags) only 18 elements HTML: 2.0 1994 HTML: 3 & 4 later 90’s XHTML: 2000 (and still used) HTML5: Began 2004
- 4. BASIC WEBPAGE STRUCTURE <html> <head> <title>Thisis for the title</title> </head> <body> <h1>My Web Site</h1> <p>All content to be displayed on a browser must be placed between the body tags. There is some type of formatting code around the content.</p> </body> </html>
- 5. BASIC WEBPAGE STRUCTURE <!DOCTYPEhtml> <html> <head> <meta charset=“utf-8”> <title>HTML body tag learning</title> </head> <body style="background-color:#00ff66"> <h2>Elements, Attributes, and Values</h2> <br /> <p>Elements are the first part of a tag; Attributes tell what will be effected in a certain manner, values define how the attribute is impacted.</p> </body> </html>
- 6. HMTL FORMATTING TAGS CommonExamples <b>bold tag</b> <i>italic tag</i> <p>paragraph tag</p> <h1>Header (large) <br /> break tag <strong>strong tag</strong> <body style=“background-color:#33cc66”> - always previous to content
- 7. HEADER TAGS <h1>Header 1</h1> <h2>Header2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6> The larger the header number the smaller the header.
- 8. HOW DOES CSS3FIT IN? <h1>Header 1</h1>; <h2>Header 2</h2>; <h3>Header 3</h3> etc… The limitations of <h1> to <h6>??? CSS3, make text of any size
- 9. BASIC WEBPAGE STRUCTURE <!DOCTYPEhtml> <html> <head> <meta charset="utf-8”> <title>...</title> </head> <body> <header role="banner”> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header> <nav> <ul> <li><a href="http://www.tutorialspoint.com/html">HTML Tutorial</a></li> <li><a href="http://www.tutorialspoint.com/css">CSS Tutorial</a></li> <li><a href="http://www.tutorialspoint.com/javascript">JavaScript Tutorial</a></li> </ul> </nav> <section> <p>Once article can have multiple sections</p> </section> <p>This is aside part of the web page</p> <footer> Created by <a href="http://tutorialspoint.com/">Tutorials Point</a> </footer> </body> </html>
- 10. THE INDEX PAGE Theindex page is extremely important – you MUST understand why!!! Browsers cannot display the page unless it has an index page. All web sites must have an index page – even if their extension is not .html Analogy: Index to a book, guides you to the page of information you seek … the index.html page to your website works in the same way Lastly, index.html as well as other pages, should be in lower case and single words.
- 11. YOUR FIRST WEBSITE ASSIGNMENT Create one page. include 2 paragraphs about yourself. Change the background color from anything but white Use the basic HTML structure with paragraph tags. In addition to the paragraph tag include 5 other HTML tags from your reading. This will be due at the end of class!!!!
- 12. NEXT CLASS Read thefirst chapter provided on Moodle. Come to class prepared to repeat some of what we did, and add more to it.