HTML © Ana Lucas– 2007versão 1.0 HTML – Hyper Text Markup Language.
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
-
Upload
amani-allard -
Category
Documents
-
view
224 -
download
0
Transcript of HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
![Page 1: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/1.jpg)
HTML and CSS
![Page 2: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/2.jpg)
HTML
• Hyper Text Markup Language• Tells browser how to display text and images
![Page 3: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/3.jpg)
Tags
• Each text item goes within opening and closing tags
<p> text goes here </p>
![Page 4: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/4.jpg)
Example
<h1>This is a heading</h1>
<p>Here’s a paragraph</p>
![Page 5: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/5.jpg)
Basic HTML page – html and body tags
<html><body>
<h1>My heading</h1><p>This is a paragraph</p>
</body></html>
![Page 6: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/6.jpg)
Page structure
![Page 7: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/7.jpg)
HTML tags
![Page 8: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/8.jpg)
Headers
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>
![Page 9: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/9.jpg)
Link
<a href=“google.com”>Google</a>
![Page 10: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/10.jpg)
Image
<img src=image/url.jpg>
![Page 11: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/11.jpg)
Lists – Ordered and Unordered
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
![Page 12: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/12.jpg)
HTML head
<!DOCTYPE html><html><head><title>Title of the document</title></head>
<body>The content of the document</body>
</html>
![Page 13: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/13.jpg)
CSS
• Cascading style sheets• Define how the HTML elements look
style.css
body {background-color: #d0e4fe;}
p {color: blue;background-color: yellow;}
![Page 14: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/14.jpg)
Connecting HTML and CSS<!DOCTYPE html><html><head><title>Title of the document</title><link rel="stylesheet" type="text/css" href="style.css"></head>
<body>The content of the document</body>
</html>
![Page 15: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/15.jpg)
Syntax
![Page 16: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/16.jpg)
Properties: background
background-color: #ff0000;
background-image: url(‘www.image.jpg’);
![Page 17: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/17.jpg)
Properties: text
color: blue;
font-family: “Times New Roman”, Times, serif;font-family: “Arial”, sans-serif;
font-size: 40px;
text-align: center;
![Page 18: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/18.jpg)
Box Model
![Page 19: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/19.jpg)
Properties: box model/sizing
width: 200px;
padding: 10px;
margin: 4px;margin-left: 20px;margin-right: 10px;margin-top: 10px;margin-bottom: 0px;
border: 1px solid blue;border: 2px dashed green;
![Page 20: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/20.jpg)
Selectors
• Which HTML elements does this CSS apply to?
![Page 21: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/21.jpg)
Selectors: type• Selects all elements of that type
HTML: <ul><li> one </li><li> two </li></ul>
CSS:li {color:blue;}
![Page 22: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/22.jpg)
Selectors: id
• Only one element can have a given id
HTML: <div id=“name”>…</div>
CSS:#name {color:blue;}
![Page 23: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/23.jpg)
Selectors: class• Multiple elements can have the same class• Elements can have multiple classes
HTML: <div class=“alert”>…</div><div class=“alert warning” >…</div><div class = “alert” id=“name”>…</div>
CSS:.alert {color:red;font-size:14px;}
![Page 24: HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.](https://reader036.fdocuments.us/reader036/viewer/2022062312/551a98185503466b3a8b529f/html5/thumbnails/24.jpg)
Lab: HTML and CSS
• Make 2 HTML pages: homepage and blog post page
• Draw ideas on back of lab• See me if you haven’t finished Friday’s lab