Intro - To - HTML PDF

Intro to HTML
Web Development
HTML documents
Hypertext Markup Language (HTML)

documents use the .html extension. This
extension allows a web browser or device,
such as a smartphone, to understand that
HTML content is on the page, and the
content of the page is then rendered by the
browser or device according to the rules of
HTML.
Markup tags are used to define the content
on an HTML page 2
HTML versus CSS
msn.com before CSS msn.com after CSS

HTML versus CSS
body {
• CSS background-
– Stands for color: #d0e4fe;
"Cascading Style Sheets". }
A style sheet language for h1 {
describing how to display
an HTML document.
color: orange;
text-align: center;
}
• HTML
– Stands for <!DOCTYPE html>
"HyperText Markup Langu
age", and it is the primary
<html lang="en">
document format on the <head>
Web. It is a standardized <meta charset="utf-8">
system for tagging <title>My HTML
content on a web page so
that a web browser knows page</title>
how to present it properly </head>
to the viewer. It is a <body>
standardized way to
describe a document's
<p> This is an HTML
structure and the roles of document </p>
the different parts of that </body>
document. </html>
HTML Example
<!DOCTYPE html>
A
A. Doctype . <html> B
B. HTML element
C. Head element <head> C
D. Meta element <meta charset="utf-8"> D
<title>HTML Example</title> E
E. Title element </head>
F. Body element
<body> F
G. Header element <header role="banner"> G

H. Heading 1 element <h1> HTML5 Document Structure Example</h1> H
I. Paragraph element <p>This page should be tried in safari, chrome or I
Mozila.</p>
J. Footer element
</header>
<footer> J
<p>Created by <a
href="http://www.udm.ac.mu/">UDM</a></p>
</footer>
</body>
</html>
HTML elements
In this example there are two heading 1 tags; an
opening tag <h1> and a closing tag </h1>.
There is text content nested within these tags.
<h1>HTML5 Document Structure
Example</h1>
The tags are not seen by the viewer of the web
page, but every web browser knows that the text
between the tags is a heading 1.
The pair of tags is referred to as an html
element. So in this case we have a heading 1
element. Web pages are built upon the
6
arrangement of these elements.
HTML Elements
• A. Doctype. This line instructs the browser to interpret all the code that follows
according to a unique set of rules.
B. HTML element. This element nests all the following elements and tells the
browser to expect an HTML document.
C. Head element. This section includes information about the page, but nothing is
rendered on the page itself.
D.Meta element. Provides metadata about the HTML document. Metadata will not be
displayed on the page, but will be machine parsable. Meta elements are typically
used to specify page description, keywords, author of the document, last modified,
and other metadata
• E. Title element. Any content inside the title tags show up at the top of the browser.
This is what is used when a user bookmarks a page in the browser.
F. Body element. All content within the body can be rendered in the browser’s main
window.
G. Header element. Represents a container for introductory content or a set of
navigational links
• H. Heading1 element. Formats the enclosed content as bold by default.
I. Paragraph element. By default, the browser adds space before and after this
element which often contains multiple lines of text.
J. Footer element. Defines a footer for a document or section.
7
HTML 4.0 and XHTML 1.0
HTML 4.0 and XHTML 1.0 are two

standards released by the World Web
Consortium (W3C). Both languages
share virtually the same tags and
attributes but the syntax of XHTML code
stricter.
8
Examples of differences
between HTML 4.01
and XHTML 1.0
In XHTML, all tags must be lowercase.
XHTML requires all tags to be closed — meaning that
there must be a tag at the start and end of the element
being tagged — such as a headline, paragraph, or
image.
XHTML requires proper nesting of tags. In the
following example, the <em> tag to emphasize text
opens within the <h1> headline tag. As such, it must
be closed before the <h1> is closed.
<h1> Welcome to <em>Worldwide Apparel’s</em>

intranet</h1>
9
DOCTYPE
The DOCTYPE is the very first line in your document. A
web browser renders all of your page elements based on
the specification you declare.
The web browser checks to see what language you
are using via the DOCTYPE
This is a typical DOCTYPE for HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This is a typical DOCTYPE for HTML 5
<!DOCTYPE html>
10
Having a DOCTYPE allows you
to validate your page syntax
You can validate your page syntax based on
the “rules” of the DOCTYPE you have
specified.
For example, the rules of XHTML 1.0 state that
all tags must be lower case. This code, then,
would be invalid:
<H1> Hello! </H1>
The W3C provides a validation service. You
can use it to test your pages. Locating invalid
code is a fast way to check your pages for
errors including typos or missing tags. 11
W3C validator
• Open your web browser and navigate to

http://validator.w3.org.
• The W3C validator allows you to check your
HTML code for errors.
12
CSS Validator
• The CSS validator checks Cascading Style Sheets (CSS) and (X)HTML documents that
use CSS stylesheets.
• Unicorn
– Unicorn is W3C's unified validator, which helps people improve the quality of their
Web pages by performing a variety of checks. Unicorn gathers the results of the
popular HTML and CSS validators, as well as other useful services, such as
RSS/Atom feeds and http headers.
• Link Checker
– The W3C Link Checker looks for issues in links, anchors and referenced objects in a
Web page, CSS style sheet, or recursively on a whole Web site. For best results, it is
recommended to first ensure that the documents checked use valid HTML
Markup and CSS.
• Internationalization Checker
– The W3C Internationalization Checker provides information about various
internationalization-related aspects of your page, including the HTTP headers that
affect it. It will also report a number of issues and offer advice about how to resolve
them.
• W3C cheatsheet provides quick access to useful information from a variety of
specifications published by W3C. It aims at giving in a very compact and mobile-friendly
format a compilation of useful knowledge extracted from W3C specifications, completed
by summaries of guidelines developed at W3C, in particular Web accessibility guidelines,
the Mobile Web Best Practices, and a number of internationalization tips.
Creating HTML
• An HTML file must have an .html file extension
• Text Editor: : NotePad, NotePad++, Brackets, Sublime

Text, VS Code(https://code.visualstudio.com/),
Codepen(http://www.codepen.io)
– Xcode, Textwrangler(MAC users)
• Five best WYSIWYG HTML Editors:
– Komposer(Windows/Mac/LINUX/free)
– iWeb(Mac)
– Adobe DreamWeaver(Windows/Mac)
– Microsoft Expression Web(Windows)
– BlueGriffon
– Flux(Mac)
<doctype>
• Beginning of document must have a document

type declaration, which tells web browsers how to
handle the version of HTML you are writing.
• For this course, we’ll use:

<!DOCTYPE html>
HTML Basics
• HTML is comprised of elements called “tags”: < >
• Tags are written in lower case
• Tags are nested:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
• HTML describes structure using two main sections:
<head> and <body>
<head> Section: Introduction
• This section contains information that doesn’t

show directly on the viewable page.
• Starts after the <doctype> declaration.
• Begins with <head> and ends with </head>
• Can contain multiple nested tags:
– <title>
– <meta>
– <script>
– <style>
– <!– comments -->
<head> Section: <title> tag
• Exists between
<head> </head>
tags.
• <title>web
design</title>
• Use to give the web

page a title.
• Search engines and

people rely on titles.
<head> Section: <meta> tag
• Meta tags describe the content contained within

the page
• The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page, but
will be machine parsable. Meta elements are typically used
to specify page description, keywords, author of the
document, last modified, and other metadata.
<meta name="description" content="HTML tutorial">
<meta name="keywords" content="html, webdesign, styles">
<meta name="author" content="Chris Brewer">
<meta http-equiv="refresh" content="5;

url=http://www.fogbox.com">
<meta> tag - Examples
• Example 1 - Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, XHTML,
JavaScript">
• Example 2 - Define a description of your web page:
– <meta name="description" content="Free Web tutorials on HTML
and CSS">
• Example 3 - Define the author of a page:
– <meta name="author" content="John Doe">
• Example 4 - Refresh document every 30 seconds:
– <meta http-equiv="refresh" content="30">
• Example 5 - Setting the viewport to make your website look good
on all devices:
– <meta name="viewport" content="width=device-width, initial-
scale=1.0">
<head> Section: <script> tag
• The <script> </script> tag is used to embed

scripts such as Javascript or PHP into an HTML
document. Its use will be covered later in this
course.
• Example:
<script>
document.getElementById("demo").innerHTML = "
Hello JavaScript!";
</script>
<head> Section: <style> tag
• The <style> </style> tag is recent addition

to HTML used to embed further formatting
information into a web page. Its use will be
covered later in this course.
• Example:
• <html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Comments:  tag
• Comments are a developer’s best friend (and

other developers will either love you or hate you
depending on whether you use them or not).
• Comments can exist anywhere between the

<html></html> tags
• Comments start with 

Exercise 1
<!DOCTYPE html>
<html>
<head>

<title>Your name Here</title>
</head>
</html>
<body> Section: Introduction
• The <body> section describes the overall structure

of the viewable portion of the page.
• Starts after the <head> </head> section.
• Begins with <body> and ends with </body>
<body>
<h1>Good morning</h1>
</body>
Exercise 1
<!DOCTYPE html>
<html>
<head>
<title>HTML home page</title>
</head>
<body>
<h1>Good morning</h1>
</body>
</html>
<body> Section: Text Styling
• Text can be formatted as <h1></h1>

Heading 1
as headings or regular <h2></h2> Heading 2
paragraph text. Use these <h3></h3> Heading 3
consistently!
<h4></h4> Heading 4
<h5></h5> Heading 5
• <p></p> automatically <h6></h6> Heading 6
double spaces after each <p></p> Paragraph
paragraph. <br/> Line break
• <br/> is weird: the

trailing “/” makes it
XHTML compliant
<body> Section: Text Formatting
<b></b> bold
• Tags modify the text
<i></i> italicized
between the opening tag <u></u> underlined
and the closing tag. <sup></sup> superscript
– Ex. <b>Hello <sub></sub> subscript
World</b> makes “Hello <strong></strong> strong
World” bold. <em></em> emphasized
<pre></pre> Preformatted
text
<blockquote> Quoted text
</blockquote> block
<del></del> Deleted text

(strike through)
Exercise 1
<!DOCTYPE html>
<html>
<head>
<title>HTML home page</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>bare-minimum</em> web page. It is created
using web standards.</p>
<p>Next paragraph.</p>
<h2>More Info</h2>
<p>This is a paragraph<br>Next line.</p>
</body>
</html>
View the browser output of exercise1.html

Hyperlinks
• A hyperlink is a highlighted object which when

click allows you to link to some other object. Links
can be made to
• an internal anchor(the target of the hyperlink)
• an external anchor in the same website
• another website
• send mail
• download files
• A hyperlink is defined using an anchor.
• <a> ... </a> Anchor
• Description:
• The anchor tag allows you to create links to other
internet pages, documents and downloadable
files. Anything that appears between the begin
and end anchor tags will take you to that address
when clicked.
• Attributes:
•
<body> Section: <a> tag
• Link to a document called form.html on same server in

same directory:
<a href="form.html">Form Example</a>
• Link to a document called form.html on same server in a

different directory:
<a href="../link.html">Example</a>
• Link to a document called cat.html on same server in a

subdirectory of the current directory:
<a href="stuff/cat.html">Catalog</a>
<body> Section: <a> tag
• Link to an external web site:

<a href="http://www.udm.ac.mu"
target="_new">udm</a>
– Note: Always use a full URL, including "http://". Using the
target="_new" attribute opens the link in a new window.
• Link to an E-mail address:

<a href="mailto:dramlowat@gmail.com">Email
Me</a>
• Link to a document called form.html on same server in

same directory using an image as a button:
<a href="forms.html"><img src=“logo.jpg" /></a>
View the browser output of links.html

<body> Section: <img> tag
• Add an image:
<img src=http://udm.ac.mu/icons/front.jpg />
• There are a number of attributes:
Ex. <img src="./logo.jpg" alt="PHP logo" />
src Location of image file

alt Substitute text for display
If the source is inaccessible, you can also specify "fall
back" options via the "alt" attribute. You will always want to
specify the "alt" attribute with a short phrase describing the
image. This text is what will be read aloud if your user is
using a screen reader, or will be displayed if the user's
browser will not load images. Note that this is an
example of a "self-closing" tag meaning there is no
closing tag, you just end the opening tag with a
forward slash.
<body> Section: Misc. tags
• <hr />: Draws a horizontal rule (line):

<hr size="5" width="70%" />
• <center></center>: Deprecated:
<center>Hello World!</center>
• <font>: Changes typestyle. With CSS, there is no

reason to use this tag:
<font size=1 color="blue">Woot!</font>
View the browser output of misc.html

<body> Section: <ol> tag
• Create an Ordered List using <ol></ol>

– Ex. <ol type="1"><li>Apple</li><li>Orange</li></ol>
• Attribute values for type are 1, A, a, I, or i

i. Apple
ii. Orange
1. Apple a. Apple iii. Grapefruit
2. Orange b. Orange
3. Grapefruit c. Grapefruit
I. Apple
A. Apple II. Orange
View the browser B. Orange III. Grapefruit
output of
orderedlists.html
C. Grapefruit
<body> Section: <ul> tag
• Create an Unordered List using <ul></ul>

– Ex. <ul type="disc"><li>Apple</li><li>Orange</li></ul>
• Attribute values for type are disc, square or circle
• Apple o Apple
• Orange o Orange
Apple
• Pear o Pear
Orange
View the browser Pear
output of
unorderedlists.html
Nested Bulleted List
• ANALOGY: Russian stacking dolls

• Class Exercise
<body> Section: Special Chars
Symbol Entity Example

Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Nonbreaking Space
Em Dash — —
Quotation Mark " “
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
<body> Section: <table> tags
• Tables are losing favor to <div> and <span>,

with the CSS revolution
• Tables comprised of several core tags:

<table></table>: Begin and end the table
<tr></tr>: Create a table row
<td></td>: Create tabular data
• Example:
Creates a new row
<table border=1>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
Creates a
<tr> new row
<td colspan=2>That’s a wrap</td>
</tr>
</table> View the browser output of tables.html
Table Data “cells” (<td>) can contain tables (tables within tables):
<table border=1>
<tr>
<td>Contact:</td>
<td>
<table border=1>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
View the browser output of tables2.html
<body> Section: <div> tag
• Creates logical divisions within a page
• Acts as a <p>
• Perfect for use with CSS

<div> example
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>

<body> Section: <span> tag
• Span doesn’t act like a <p> tag
• Useful for modifying a specific portion of text

without creating a separate division in the
document.
• Very useful with CSS

<span> example
<p>My mother has <span style="color:blue;font-

weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
New HTML5 Elements
• New semantic elements like <header>,

<footer>, <article>, and <section>.
• New attributes of form elements like number,
date, time, calendar, and range.
• New graphic elements: <svg> and <canvas>.
• New multimedia elements: <audio> and
<video>.
HTML Resources
• See www.htmlhelp.com/reference/html40/olist.html
for a list of HTML tags and attributes.
• Clean up HTML: http://infohound.net/tidy/
• http://www.w3schools.com/tags/default.asp

Intro - To - HTML PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Intro - To - HTML PDF

Transféré par

Droits d'auteur :

Formats disponibles

Intro to HTML

Hypertext Markup Language (HTML)

msn.com before CSS msn.com after CSS

G. Header element <header role="banner"> G

HTML 4.0 and XHTML 1.0 are two

<h1> Welcome to <em>Worldwide Apparel’s</em>

• Open your web browser and navigate to

• An HTML file must have an .html file extension

• Text Editor: : NotePad, NotePad++, Brackets, Sublime

• Beginning of document must have a document

• For this course, we’ll use:

• This section contains information that doesn’t

• Use to give the web

• Search engines and

• Meta tags describe the content contained within

<meta name="keywords" content="html, webdesign, styles">

<meta name="author" content="Chris Brewer">

<meta http-equiv="refresh" content="5;

• Example 1 - Define keywords for search engines:

• The <script> </script> tag is used to embed

• The <style> </style> tag is recent addition

• Comments are a developer’s best friend (and

• Comments can exist anywhere between the

• Comments start with

• The <body> section describes the overall structure

• Starts after the <head> </head> section.

• Begins with <body> and ends with </body>

• Text can be formatted as <h1></h1>

• <br/> is weird: the

<del></del> Deleted text

View the browser output of exercise1.html

• A hyperlink is a highlighted object which when

• Link to a document called form.html on same server in

• Link to a document called form.html on same server in a

• Link to a document called cat.html on same server in a

• Link to an external web site:

• Link to an E-mail address:

• Link to a document called form.html on same server in

View the browser output of links.html

src Location of image file

• <hr />: Draws a horizontal rule (line):

• <font>: Changes typestyle. With CSS, there is no

View the browser output of misc.html

• Create an Ordered List using <ol></ol>

• Attribute values for type are 1, A, a, I, or i

• Create an Unordered List using <ul></ul>

• Attribute values for type are disc, square or circle

• ANALOGY: Russian stacking dolls

Symbol Entity Example

• Tables are losing favor to <div> and <span>,

• Tables comprised of several core tags:

• Creates logical divisions within a page

• Perfect for use with CSS

<p>This is some text.</p>

<p>This is some text.</p>

• Span doesn’t act like a <p> tag

• Useful for modifying a specific portion of text

• Very useful with CSS

<p>My mother has <span style="color:blue;font-

• New semantic elements like <header>,

• Clean up HTML: http://infohound.net/tidy/

Vous aimerez peut-être aussi