Intro to HTML Objectives Write simple HTML documents Understand the - - PowerPoint PPT Presentation

▶
intro to html objectives
SMART_READER_LITE
LIVE PREVIEW

Intro to HTML Objectives Write simple HTML documents Understand the - - PowerPoint PPT Presentation

Oct 17, 2022 296 likes •442 views

Intro to HTML Objectives Write simple HTML documents Understand the di ff erence between closing and self closing tags Write tags with attributes Use MDN as a reference Given an image, write the corresponding HTML History of HTML Created in

slide-1
SLIDE 1

Intro to HTML

slide-2
SLIDE 2

Objectives

Write simple HTML documents Understand the difference between closing and self closing tags Write tags with attributes Use MDN as a reference Given an image, write the corresponding HTML

slide-3
SLIDE 3

History of HTML

Created in 1989/1990 Allowed publishing and exchanging of scientific and technical documents Allowed electronic linking of documents via hyperlinks

slide-4
SLIDE 4

<tagName> Some Content </tagName>

The General Rule

slide-5
SLIDE 5

<!DOCTYPE html> <html> <head> <!-- Our metadata goes here --> <title></title> </head> <body> <!-- Our content goes here --> </body> </html>

Every HTML document we create will start with this boilerplate:

slide-6
SLIDE 6

<!-- This is a comment. It doesn't do anything! -->

Comments

slide-7
SLIDE 7

<h1>I'm a header </h1> <h2>I'm a slightly smaller header </h2> <h6>I'm the smallest header </h6> <p>I'm a paragraph</p> <button>I'm a button!</button> <ul> <li>List Item 1</li> <li>List Item 2</li> </ul> <ol> <li>List Item 1</li> <li>List Item 2</li> </ol>

Common Tags

slide-8
SLIDE 8

MDN Element Reference

slide-9
SLIDE 9

Closing Tags

<h1>I need a closing tag </h1> <p>Me too!</p>

Self-Closing Tags

<!-- No closing tag or inner text needed --> <img src="corgi.png"> <link href="style.css"> <!-- Don't worry about what these tags do yet -->

slide-10
SLIDE 10

Adding Additional Information To Tags

<img src="corgi.png"> <p class="selected">woof woof</p> <a href="www.google.com">Click me to go to Google</a> <link rel="stylesheet" type="text/css" href="style.css">

<tag name="value"></tag>

Attributes

slide-11
SLIDE 11

MDN Attribute Reference

slide-12
SLIDE 12

Images

<img src="corgi.png">

slide-13
SLIDE 13

Links

<a href="www.google.com">Click me to go to Google</a> <a href="www.reddit.com">Click me to go to Reddit</a> <a href="url">Link Text</a>