<start>middle</end> Version 1.1 HTML, what is it? <start>middle</end> Version 1.1
Things to look forward to What does HTML mean? Right Click > View Sauce, yummy <tag>tastic Tags we use a lot Adding information with Attributes Tips for clean readable code No spaces or smiley faces
What does HTML mean? Hyper Text Mark-up Language Not a complicated programming language Easy to write and understand Interpreted by a browser to display content
Right Click > View Sauce Where to find HTML Right click on your browser and “View Source” Finding out how things are done Can I just copy everyone’s code? There’s more to a web site than just the HTML Judging other Web Sites Finding problems
<tag>tastic Tags are parts of HTML <start>middle</end> VS <block /> <p>This is some text</p> <img /> <br /> <hr /> Tags names are related their purpose <img> = Image - <p> = Paragraph Popular Tags <html><head><title><body> <h1><h2><p><a><img><ul><li> Nested tags <p>I said <strong>STOP!</strong></p>
Tags we use a lot <body> = Everything within this tag we see on the page <head> = Contains information about the page <p> = Paragraph, use for normal text <a> = Anchor Link i.e Hyper Links <h1> = Main page heading, used only once <h2>-<h6> = Sub headings within text <img> = Images, durr! <ul> - Un-Ordered list i.e. bullet point lists <ol> - Ordered Lists – i.e. numbered points <li> - List Items, the actual list items <table>, <tr><td> = Tables, Rows, Cells/Columns <div> = Dividision, a section of the page content <strong> = Bold text and <em> = Italic Text
Adding Information With Attributes An attribute adds information to a tag Some tags need attributes to work <img>, <a>, <input>…. What an attribute looks like attribute=“value” <img src=“picture.jpg” alt=“Sunset” /> <a href=“news.html”>Click to read more</a>
Clean Readable Code Right Tag Right Place <h1> = main page heading <h2> = page sub title <p> = page text NOT = <p>I want to make this <h1>BIG</h1></p> Start your tag, end your tag, add detail <h1></h1> <h1>Now I Can Safely Put My Title</h1> Using Tabs <ul> <li> List Item</li> <li> Another List Item</li> </ul>
No Spaces or Smiley Faces Naming Files index.html NOT home.html product-1234 .jpg NOT product 1234.jpg breaking-news.html NOT breaking-news!!!.html contact-us.html NOT Contact-Us.html
Hope you enjoyed that Please make notes on the presentation slides, it will help you remember.