HTML and CSS HTML Hyper Text Markup Language

HTML • Hyper Text Markup Language • Tells browser how to display text and

Tags • Each text item goes within opening and closing tags <p> text goes

Example <h 1>This is a heading</h 1> <p>Here’s a paragraph</p>

Basic HTML page – html and body tags <html> <body> <h 1>My heading</h 1>

Headers <h 1>Heading 1</h 1> <h 2>Heading 2</h 2> <h 3>Heading 3</h 3>

Image <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=image/url. jpg>

Lists – Ordered and Unordered <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol>

HTML head <!DOCTYPE html> <head> <title>Title of the document</title> </head> <body> The content of

CSS • Cascading style sheets • Define how the HTML elements look style. css

Connecting HTML and CSS <!DOCTYPE html> <head> <title>Title of the document</title> <link rel="stylesheet" type="text/css"

Properties: background-color: #ff 0000; background-image: url(‘www. image. jpg’);

Properties: text color: blue; font-family: “Times New Roman”, Times, serif; font-family: “Arial”, sans-serif; font-size:

Properties: box model/sizing width: 200 px; padding: 10 px; margin: 4 px; margin-left: 20

Selectors • Which HTML elements does this CSS apply to?

Selectors: type • Selects all elements of that type HTML: <ul> <li> one </li>

Selectors: id • Only one element can have a given id HTML: <div id=“name”>…</div>

Selectors: class • Multiple elements can have the same class • Elements can have

Lab: HTML and CSS • Make 2 HTML pages: homepage and blog post page

Slides: 24

Download presentation

HTML and CSS

HTML • Hyper Text Markup Language • Tells browser how to display text and images

Tags • Each text item goes within opening and closing tags <p> text goes here </p>

Example <h 1>This is a heading</h 1> <p>Here’s a paragraph</p>

Basic HTML page – html and body tags <html> <body> <h 1>My heading</h 1> <p>This is a paragraph</p> </body> </html>

Page structure

HTML tags

Headers <h 1>Heading 1</h 1> <h 2>Heading 2</h 2> <h 3>Heading 3</h 3>

Link <a href=“google. com”> Google</a>

Image <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=image/url. jpg>

Image <img src=image/url. 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>

HTML head <!DOCTYPE html> <head> <title>Title of the document</title> </head> <body> The content of the document </body> </html>

CSS • Cascading style sheets • Define how the HTML elements look style. css body { background-color: #d 0 e 4 fe; } p{ color: blue; background-color: yellow; }

Connecting HTML and CSS <!DOCTYPE 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>

Syntax

Properties: background-color: #ff 0000; background-image: url(‘www. image. jpg’);

Properties: text color: blue; font-family: “Times New Roman”, Times, serif; font-family: “Arial”, sans-serif; font-size: 40 px; text-align: center;

Box Model

Properties: box model/sizing width: 200 px; padding: 10 px; margin: 4 px; margin-left: 20 px; margin-right: 10 px; margin-top: 10 px; margin-bottom: 0 px; border: 1 px solid blue; border: 2 px dashed green;

Selectors • Which HTML elements does this CSS apply to?

Selectors: type • Selects all elements of that type HTML: <ul> <li> one </li> <li> two </li> </ul> CSS: li { color: blue; }

Selectors: id • Only one element can have a given id HTML: <div id=“name”>…</div> CSS: #name { color: blue; }

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: 14 px; }

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