HTML 1 - skillfUL
advertisement
Created by Sarah Dooley & Amanda Foster Edited by Caroline Hallam Edited and presented by Laura Dimmit, January 2015 OVERVIEW Today’s session: What is HTML? Common tags and syntax Practice Upcoming sessions: Add Style to your Website with CSS, January 27th at 7 p.m. Advanced HTML & CSS, February 3rd at 7 p.m. WHAT IS HTML? HTML stands for HyperText Markup Language Hypertext: Linking to content Markup language: defining structure Paired with CSS, which defines how the structure will be displayed. Web browsers read the markup language and interpret the instructions given to display a webpage. THE HOMEPAGE Index.html is the default file name for any homepage or main website directory When you visit a website like lib.unc.edu, the web server looks within the directory for the default file to display even if you don’t type out the full file name Without this page, users will either see a directory listing your website files, or an error page HOW TO NAME HTML FILES Think about users, since they’ll have to type in your URLs. KISS: Keep it simple, stupid! Use lowercase letters Use underscores or dashes, not spaces Remember the proper file extensions ( .html, .css, etc.) Keep all the files for your website in the same folder TAGS HTML uses tags to mark up content Each tag (usually!) has an opening tag… <p> …and a closing tag </p> DOCUMENT STRUCTURE An HTML document has a head and a body The head provides information about the document The body is where the document’s content goes DOCUMENT STRUCTURE <!DOCTYPE HTML> <html> <head> <title>My first page</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> DOCUMENT STRUCTURE The DOCTYPE declaration defines the document type The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph HEADINGS & PARAGRAPHS <h1> Heading 1 <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5>Heading </h1> 5</h5> <h6>Heading 6</h6> <p>This is the first paragraph.</p> <p>And here is a second paragraph.</p> Let's try it out! LISTS <ul> = Unordered list (bulleted) <ol> = Ordered list (numbered) <li> = list element Example: <ul> <li>Lions</li> <li>Tigers</li> <li>Bears</li> </ul> Let's try it out! • Lions • Tigers • Bears TAG ATTRIBUTES You can add more information to your tags with attributes. <a href=http://www.google.com>This is a link!</a> <img src=“cat.jpg” alt=“Cat!”/> An attribute consists of a name and a value. Tag: a Attribute: Name: href Value: http://www.google.com Format: use quotation marks around the value. Use lowercase letters for the whole tag. TAG ATTRIBUTE EXAMPLES <a href=http://www.google.com>This is a link!</a> <img src=“cat.jpg” alt=“Cat!”/> IMAGES Place all images for your website in the same folder Example: <img src=“images/cat.jpg” alt=“Cat!”/> Every image you include should have the following attributes: Source (“src”) Alternative Display Name (“alt”) NESTING TAGS Sometimes you’ll have one set of tags inside another <p>Here’s some text in a paragraph. Then you can say some more really exciting things. And even more! But wait, I want to show a <a href=http://www.google.com>Link here</a>! And then finish out with some more text.</p> If so, close the tags in the reverse of the order you opened them ? <p><em><strong>This is obviously very important.< INLINE ELEMENTS & BLOCK ELEMENTS A block element “takes up the full width available, and has a line break before and after it.”* Block elements include headings, paragraphs, and lists An inline element “only takes up as much width as necessary, and does not force line breaks”* Inline elements include links, images, and line break <br> Inline elements should be placed within block elements, not vice versa. *from http://www.w3schools.com/css/css_display_visibility.asp LINKING BETWEEN PAGES Linking between pages within a website (relative linking) is similar to linking to external websites (absolute linking). Example: Relative Link: <a href=“myblog.html”>My Blog</a> Absolute Link: <a href=“http://www.google.com”>Google</a> LEARN FROM PAGES THAT ALREADY EXIST It’s easy to see the HMTL code for any webpage. In Google Chrome and Firefox, right-click and select “View Page Source” In Internet Explorer, right-click and select “View Source” Let’s look at an example! WRAP UP HTML Resources on the SkillfUL website UL Design Lab for assistance Ask us at the desk Set up a consultation Upcoming sessions Add Style to your Website with CSS, January 27th at 7 p.m. Advanced HTML & CSS, February 3rd at 7 p.m. Feedback Form
