HTML: Basics

Agenda 12:00 - HTML Basics 1:00 - HTML – Lists & Styling Break 2:00 CSS Basics 3:00 Lunch 3:30 CSS Selectors & Classes Break 5:00 HTML5 Page using CSS & HTML

HTML is the BEST!

See the code with the s? HTML is the BEST!

Your turn HTML is the BEST!

Key Points 1.HTML stands for HyperText Markup Language. Hypertext means "text with links in it."

Key Points 2. A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more.

Key Points 3.What makes webpages look attractive? That's CSS—Cascading Style Sheets. “Think of it like skin and makeup that covers the bones of HTML.” - codecademy

Basic Components Add your own text to the page.

Add your own text to the page.

Tags Question: So what are the <> open and close brackets? Answer: Anything inside these brackets is called a Tag

Rules for Tags 1.Tags nearly always come in pairs: an open tag and a closing tag Open: Close:

Rules for Tags 2. They’re like parentheses: if you open one, you have to close it.

Rules for Tags 3. Tags nest, like the Russian dolls, so you should close them in the same order they lay down.

Rules for Tags - Nesting TEXT

Head & Body Add your own text to the page.

Titles

My Title

Body & Paragraphs

My Title

Checking In Everyone has coded in HTML today!

New Skills 1.When and why we use HTML 2.Set up an HTML file with tags 3.Title the webpage (in the ) 4.Create paragraphs (in the with tags)

Headings

Links

Same Window (_Self)

Same Window (_Self)

Same Window (_Self)

News! Same Window (_Self)

News! Same Window (_Self)

News! Same Window (_Blank)

Me Same Window (_Mailto:)

Images

Images + Links

Review

My Title

Header

Paragraph

HTML: Lists & Styling

Ordered Lists 1.Coffee 2.Tea 3.Milk

Coffee Tea Milk

Coffee Tea Milk

Unordered Lists Coffee Tea Milk

Nested Lists Coffee Tea o Black tea o Green tea Milk

Nested Lists

Nested Lists

Nested Lists

Guacamole

Guacamole

Styling

comments This is a paragraph.

font-size

color

color + font-size

font-family Title

all together

background-color

align

bold (strong) You have Mad Skills

emphasis You have Mad Skills

Summary – your new skills! Make ordered and unordered lists Change the color, size and type of font Add comments to our HTML file Change the background color Align text Bold and italicize text

Review Make ordered and unordered lists Change the color, size and type of font Add comments to our HTML file Change the background color Align text Bold and italicize text

image & link

lists Sherlock Holmes Watson loyal patient brave Mycroft

style Title

bold & emphasis

HTML: Tables, Div & Span

tables

Tessa Gray Magnus Bane

Tessa Gray Changling? Magnus Bane Warlock

Tessa Gray Changling? Magnus Bane Warlock

Tessa GrayChangling? Magnus BaneWarlock James CarstairsNephilium

Character Gift Tessa GrayChangling? Magnus BaneWarlock James CarstairsNephilium

NameGift Tessa GrayChangling? Magnus BaneWarlock James CarstairsNephilium

3 columns across!

Infernal Devices Character Gift

Infernal Devices Character Gift

style

div(isions)

Header

style

linking a div tag

span tags

paragraph

CSS: Basics

CSS

span { color:blue; }

span { color:blue; font-family: verdana; }

inline styling vs. css One is awesome

syntax selector { property: value; }

syntax Source:

h1 { text-align:center; font-size:30px; color: Orange; }

span { font-size:40px; background-color: Green; font-style: italic; }

comments /*I'm a CSS comment!*/

review

h1 { color:red; } h2 { color:purple; font-size:25px; } h3 { font-family:Impact; } p { font-style:italic; color:blue; }

hexadecimal colors h1 { color:#DAA520; }

pixels vs. em p { font-size:2em; }

default fonts h1 { color:#E87D73; font-family:serif; }

backup values p { font-family: Garamond, cursive; }

background-color, height & width div { background-color:#cc0000; height:100px; width:100px; }

borders td { height:50px; width:50px; border:1px dashed blue; } table { border: 1px solid black;

styling links a { color:#cc0000; text-decoration:none; }

review h1 { font-family: verdana; color:#00FF00; } p { font-size:18px; color:#FFA500; }

CSS: Selectors

body { background-color:#C6E2FF; }

div { background-color:#C6E2FF; } div li { font-family: Impact; {

CSS: Branching

classes.fancy { font-family: cursive; color: #0000CD; }

ids #serious { font-family:Courier; color:#CC0000; }

Bring it all together – HTML5

Specify a language

Specify your character set

Specify a language

Semantic Layout