Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie ID01 / W01
Ähnlich wie ID01 / W01 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
ID01 / W01
- 1. Week 01 Introduction to HTML & CSS
- 2. DEFINITIONS HTML Hyper Text Mark-Up Language: STRUCTURE A system of tags that describe the structure of a webpage. + CSS Cascading Stylesheets: Design Instructions for each tag. DESIGN = Browser Software that can read & Display DISPLAY HTML, CSS, Java, PHP, etc.
- 3. HTML SYNTAX <h1> Cool Website </h1> <img src="cat.jpg" title="My Cat" />
- 4. HTML SYNTAX <h1> Cool Website </h1> <img src="cat.jpg" title="My Cat" />
- 5. HTML SYNTAX Start Element End Tag Content Tag Element <h1> Cool Website </h1> Element <img src="cat.jpg" title="My Cat" /> Attribut Value Attribut Value End e e Tag Start Tag
- 6. Mark-Up: Required Format <!DOCTYPE html> <html> <head> <title> My First Website </title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <h1> My First Website </h1> </body> </html>
- 7. Mark-Up: Tabbing <!DOCTYPE html> <html> <head> <title> My First Website </title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <h1> My First Website </h1> </body> </html>
- 8. HTML Nesting CORRECT <li> <a href="..."> Text </a> </li> <li> <a href="..."> Text </li> </a> INCORRECT
- 9. Mark-Up: Nesting <!DOCTYPE html> <html> <head> <title> My First Website </title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <h1> My First Website </h1> </body> </html>
- 10. Mark-Up in the Body plain text This is a Heading! This is a Sub-Heading! Google NYTimes Facebook This is a Sub-Sub-Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu ante odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ipsum urna. Maecenas volutpat, tellus non molestie vestibulum, velit ipsum sollicitudin nisi, vel volutpat augue nibh eget metus. Integer vitae metus eget augue fermentum egestas.
- 11. Mark-Up in the Body Identify Parts This is a Heading! This is a SubHeading! Google NYTimes Facebook This is a Sub-Sub-Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu ante odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ipsum urna. Maecenas volutpat, tellus non molestie vestibulum, velit ipsum sollicitudin nisi, vel volutpat augue nibh eget metus. Integer vitae metus eget augue fermentum egestas.
- 12. Mark-Up in the Body Add Tags <body> <h1>This is a Heading!</h1> <h2>This is a SubHeading!</h2> <ul> <li><a href="http://www.google.com"> Google </a></li> <li><a href="http://www.nytimes.com"> NYTimes </a></li> <li><a href="http://www.facebook.com"> Facebook </a></li> </ul> <h3>This is a Sub-Sub-Heading<h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu ante odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ipsum urna. Maecenas volutpat, tellus non molestie vestibulum, velit ipsum sollicitudin nisi, vel volutpat augue nibh eget metus. Integer vitae metus eget augue fermentum egestas. </p> </body>
- 13. Mark-Up in the Body Browser View This is a Heading! This is a Sub-Heading! Google NYTimes Facebook This is a Sub-Sub-Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu ante odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ipsum urna. Maecenas volutpat, tellus non molestie vestibulum, velit ipsum sollicitudin nisi, vel volutpat augue nibh eget metus. Integer vitae metus eget augue fermentum egestas.
- 14. CSS Syntax h1 { color: red; font-size: 20px; }
- 15. CSS Syntax: notation h1 { color: red; font-size: 20px; }
- 16. CSS Syntax Selector Property Value h1 { color: red; Declaration font-size: 20px; Declaration }
- 17. Relationship between HTML, CSS & the Browser HTML CSS Browser STRUCTURE DESIGN DISPLAY
- 18. Relationship between HTML, CSS & the Browser HTML CSS Browser <body> body { HEADER background-color: lightBlue; } Sub-Header <h1> HEADER </h1> <h2> Sub-Header </h2> First Second h1 { Third font-size: 14px; <ul> text-decoration: underline; <li>First</li> { <li>Second</li> This is a paragraph. It is made of sentences and words. <li>Third</li> </ul> h2 { font-size: 12px; } <p> This is a paragraph. It is made of sentences and words. </p> ul { background-color: white; } </body> li { font-weight: bold; font-size: 12px; color: blue; } p { text-align: center; }
- 19. Relationship between HTML, CSS & the Browser HTML CSS Browser <body> body { HEADER background-color: lightBlue; } Sub-Header <h1> HEADER </h1> <h2> Sub-Header </h2> First Second h1 { Third font-size: 14px; <ul> text-decoration: underline; <li>First</li> { <li>Second</li> This is a paragraph. It is made of sentences and words. <li>Third</li> </ul> h2 { font-size: 12px; } <p> This is a paragraph. It is made of sentences and words. </p> ul { background-color: white; } </body> li { font-weight: bold; font-size: 12px; color: blue; } p { text-align: center; }
- 20. Relationship between HTML, CSS & the Browser HTML CSS Browser <body> body { HEADER background-color: lightBlue; } Sub-Header <h1> HEADER </h1> <h2> Sub-Header </h2> First Second h1 { Third font-size: 14px; <ul> text-decoration: underline; <li>First</li> { <li>Second</li> This is a paragraph. It is made of sentences and words. <li>Third</li> </ul> h2 { font-size: 12px; } <p> This is a paragraph. It is made of sentences and words. </p> uo { background-color: white; } </body> li { font-weight: bold; font-size: 12px; color: blue; } p { text-align: center; }
- 21. Relationship between HTML, CSS & the Browser HTML CSS Browser <body> body { HEADER background-color: lightBlue; } Sub-Header <h1> HEADER </h1> <h2> Sub-Header </h2> First Second h1 { Third font-size: 14px; <ul> text-decoration: underline; <li>First</li> { <li>Second</li> This is a paragraph. It is made of sentences and words. <li>Third</li> </ul> h2 { font-size: 12px; } <p> This is a paragraph. It is made of sentences and words. </p> ul { background-color: white; } </body> li { font-weight: bold; font-size: 12px; color: blue; } p { text-align: center; }
- 22. Relationship between HTML, CSS & the Browser HTML CSS Browser <body> body { HEADER background-color: lightBlue; } Sub-Header <h1> HEADER </h1> <h2> Sub-Header </h2> First Second h1 { Third font-size: 14px; <ul> text-decoration: underline; <li>First</li> { <li>Second</li> This is a paragraph. It is made of sentences and words. <li>Third</li> </ul> h2 { font-size: 12px; } <p> This is a paragraph. It is made of sentences and words. </p> ul { background-color: white; } </body> li { font-weight: bold; font-size: 12px; color: blue; } p { text-align: center; }
- 23. CONNECTING HTML TO CSS THE <link> TAG <head> Start Tag stylesheet = design Path to the End Tag instructions CSS sheet. type of information Relation href type attribute Attribute Attribute <link type="text/css" rel="stylesheet" href="style.css" /> </head>
- 24. Images in HTML Start Tag Alternate text if image End Tag doesn't appear Search Path to Image Alternate Title Image Title Attribute Attribute Attribute <img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
- 25. FOLDER STRUCTURE & PATHS Root Directory Folder index.html css html images p1.jpg style.css gallery full .html p2.jpg t1.jpg info thumbs .html t2.jpg contact .html
- 26. FOLDER STRUCTURE & PATHS Root Directory Folder index.html css html images p1.jpg style.css gallery full .html p2.jpg t1.jpg info thumbs .html t2.jpg contact .html Paths: link from info.html to gallery.html <a href="gallery.html">
- 27. FOLDER STRUCTURE & PATHS Root Directory Folder index.html css html images p1.jpg style.css gallery full .html p2.jpg t1.jpg info thumbs .html t2.jpg contact .html Paths: hyperlink from index.html to gallery.html <a href="html/gallery.html">
- 28. FOLDER STRUCTURE & PATHS Root Directory Folder index.html css html images p1.jpg style.css gallery full .html p2.jpg t1.jpg info thumbs .html t2.jpg contact .html Paths: link between index.html and style.css <link rel="stylesheet" type="text/css" href="css/style.css" />
- 29. FOLDER STRUCTURE & PATHS Root Directory Folder index.html css html images p1.jpg style.css gallery full .html p2.jpg t1.jpg info thumbs .html t2.jpg contact .html Paths: hyperlink from gallery.html to style.css <link rel="stylesheet" type="text/css" href="../css/style.css" />
- 30. FOLDER STRUCTURE & PATHS Root Directory Folder index.html css html images p1.jpg style.css gallery full .html p2.jpg t1.jpg info thumbs .html t2.jpg contact .html Paths: image p1.jpg displayed on gallery.html <img src="../images/full/p1.jpg" />
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n