Scribd
Upload
8 views

2. Intro to HTML

This document serves as an introduction to HTML, covering prerequisites, key concepts, and essential elements such as syntax, attributes, and semantic HTML. It discusses the W3C and the HTML5 specification, along with common HTML tags and their usage in web development. Additionally, it emphasizes the importance of accessibility and provides resources for validation and debugging.

Uploaded by

carolina.e.klein
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

2. Intro to HTML

This document serves as an introduction to HTML, covering prerequisites, key concepts, and essential elements such as syntax, attributes, and semantic HTML. It discusses the W3C and the HTML5 specification, along with common HTML tags and their usage in web development. Additionally, it emphasizes the importance of accessibility and provides resources for validation and debugging.

Uploaded by

carolina.e.klein
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 62

Intro to HTML

Prerequisites
● How to use your computer
● How to open a file in your browser
What you’ll learn
● W3C & the specification process
● HTML Syntax & Attributes
● Basic HTML tags
● Common Attributes
● HTML Nesting
● HTTP Requests
● Form HTML tags
● What Accessibility Is
● Semantic HTML
What is HTML?

Hyper
Text
Markup
Language
W3C

The World Wide Web Consortium (W3C, www.w3.org) —


directed by the inventor of the Web and HTML, Tim
Berners-Lee — is the organization responsible for
shepherding the development of Web standards.
The Specification Process
The HTML5 Specification
http://www.w3.org/TR/html5/

Status:
● Published: 2008
● Recommendation Status: Oct. 28, 2014
HTML Feature Support
What can I use now?
What level of support do browsers offer?

Feature support is changing rapidly:


caniuse.com
HTML5
● Integrated APIs
o Video and Audio API
o Local Storage
o Geolocation
o Messaging
o Canvas
● new semantic HTML elements
● reduce need for third-party plugins like Java & Flash
Validating HTML
W3C Markup Validation Service
https://validator.w3.org/
HTML Attributes
● Can contain just about any character, except spaces/tabs,
‘, “, =, >, /, and non-Unicode characters.
● Values are optional

<span foo="bar" data-hello=’hello world’ yolo>Valid</span>

attribute attribute
name value
HTML Syntax
● HTML consists of
o element/tag
o attribute
o values

<a href="https://www.wyncode.co">Wyncode</a>
Boilerplate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Document</title>
</head>
<body>
[Most of your code goes here]
</body>
</html>
Doctype
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML5
<!DOCTYPE HTML>
HTML Comments
<!-- This is a comment -->
Head
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Document</title>
</head>
<body>
[Most of your code goes here]
</body>
</html>
Title

<title>My Document</title>
<meta>

<meta name="viewport"
content="width=device-width, initial-
scale=1">
What are the attributes?

<meta name="viewport"
content="width=device-width, initial-
scale=1">
<link>

<link rel="stylesheet"
type="text/css" href="style.css">
<script>

<script src="js/application.js"></script>
Body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Document</title>
</head>
<body>
[Most of your code goes here]
</body>
</html>
<a>

I'm with
<a href="https://www.wyncode.co">
Wyncode.
</a>
<a>
<img>
<img src="https://placeimg.com/640/480/any"
alt="Profile Pic" />

The alt attribute is “required”.


<img>
<p>

<p> This is a paragraph </p>


<p> This is paragraph number 2 </p>
<p>
<div>

<div></div>
<div>
<div class=”left-panel”>
<h1>My Homepage</h1>
<p>
Welcome, I really love Bill M.
</p>
</div>

<div class=”right-panel”>
<img src=”https://placeimg.com/640/480/any”/>
</div>
<div>
Generic Containers
● <div> a logical division of the page, like a
banner, navigation bar, sidebar, or footer.
● <span> individual words and phrases (often
called inline elements) within paragraphs
<div>, <span>

<div id="main">
<p><span>Content</span> goes here</p>
</div>
Road trip: Common Attributes

Let’s talk about the most common attributes.


Road trip: Common Attributes

class is used to classify some set of html elements.


Road trip: Common Attributes

id is used to identify a single html element.


Road trip: Common Attributes

src is used for <img>’s & <script>’s


Road trip: Common Attributes

href is used for <link>’s & <a>’s


Road trip: Common Attributes

title is used for <img>’s & <a>’s


Road trip: Common Attributes

alt is used for <img>’s


HTML nesting
When elements contain other elements, each element must
be properly nested, that is, fully contained within its parent.

<div><p><a href="#">Link</a></p></div>
Spot the bug
When elements contain other elements, each element must
be properly nested, that is, fully contained within its parent.

<div><a href="#">Link</p></a></div>
Spot the bug
When elements contain other elements, each element must
be properly nested, that is, fully contained within its parent.

<div><p><a href="#">Link</a></p>
Spot the bug
When elements contain other elements, each element must
be properly nested, that is, fully contained within its parent.

<div><p><a href="#">Link</p></a></div>
<form>

<form method="" action=""></form>


WAIT! Let’s learn about <label>

<label>First Name:</label>
<input type=”text”>

<input type="text" name="lastname">


<input type=”text”>
<input type=”password”>

<input type="password" name="pin">


<input type=”password”>
<input type=”checkbox”>

<input type="checkbox" name="tos">


<input type=”checkbox”>
Other input types

email
tel
radio
hidden
<select>

<select>
<option>Number 1</option>
<option>Second Opt</option>
</select>
<select>
Buttons

<input type="button" value="Submit" />

<button type="button">Do Stuff</button>

<input type="submit" value="Go" />


Buttons
A real form

<form action="https://formspree.io/[email protected]" method="POST">


<label>Why did you enroll?</label>
<input type="text" name="reason_for_wyncode" />
<input type="submit" value="Send!" />
</form>
Accessibility
Accessibility Guidelines
http://www.w3.org/TR/WAI-WEBCONTENT/full-
checklist.html
Laying Out HTML
Semantic HTML
● HTML markup describes the meaning of the content,
that is, the semantics.
● HTML markup does not define appearance of the
content; that’s the role of CSS (Cascading Style
Sheets).

If HTML doesn't define appearance, why is the <h1> tag


bigger and bolder? Isn't that a contradiction?
HTML5 Semantic Elements
Exploring & Debugging
● View Source
● Chrome Developer Tools
● http://codepen.io/

Don’t forget to validate!

You might also like