HTML Basics

HTML Basics
Hyper Text
+
Markup Language
Markup Language
A markup language is a
set of markup tags.
The purpose of the tags
are to describe page content.
HTML Elements
Anatomy of an Element
<tag>Content</tag>
An HTML element includes both
the HTML tag and everything between
the tag (the content).
<tag>Content</tag>
The element tag gives the
content structure and meaning.
<tag>Content</tag>
Tags normally come in pairs. The
first tag is the start tag, and the second
tag is the end tag.
<h1>Main Headline</h1>
HTML has a defined set of tag
names (also called keywords) that
the browser understands.
<html lang=en></html>
Most elements can have attributes,
which provides additional informatin
about the element.
<div class=left-nav></div>
Attributes always follow the same
format: name=value. You can use
either single or double quotes.
Where did those text styles come from?
Where did those text styles come from?

All browsers have what is called a
client stylesheet that applies formatting
to your html elements, such as text size, font,
color, margins, line-height, and much more.
Your custom css overrides
some of these default styles.
Tags: Basic Structure
doctype
html
head
body
<!DOCTYPE html>
The doctype is not actually a tag,

but a declaration, telling the browser
what kind of html you are using. The
doctype above declares HTML 5.
<html></html>
The <html> element de!nes
the whole HTML document.
<html lang=en></html>
The <html> element should have a lang
attribute to tell the browser what language
your page is written in.
<head></head>
The <head> contains special elements
that instruct the browser where to !nd
stylesheets & javascript !les, as well as
provide meta data about your site.
<body></body>
The <body> element contains
the document content (what is shown
inside the browser window).
Tutorial: Set up a basic html

template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Add your page title here</title>
</head>
<body>
</body>
</html>
Nesting
The use of our !rst three tags (html, head and body),
introduces and important concept: Nesting, which is when
tags wrap other tags. When you create markup, you should
indicate nesting by indenting the nested tags with 2 spaces
(preferred) or a tab.
Tags: Head Tags
title
base
meta
link
script
style
<title></title>
The title element:
defines a title in the browser toolbar,
provides a title for the page when it is
added to favorites
displays a title for the page in search
engine results.
EXAMPLE
<title>My Portfolio</title>
<meta>
The <meta> tag provides metadata
about the HTML document. Metadata
will not be displayed on the page, but
will be machine readable.
EXAMPLE
<meta charset="utf-8">
The <meta> is a single tag
it does not require a closing tag.
Tags: Paragraphs
<p></p>
The <p> element is a block-level tag
that contains default space-before and
space-after properties (making indention
unnecessary.)
EXAMPLE
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non placerat tortor. Quisque
imperdiet vel enim vitae tempor. Pellentesque nec finibus turpis, at placerat purus. </p>
<p>Nam turpis metus, tristique at mi ac, cursus luctus est. Curabitur ac dapibus tellus. Etiam
consectetur sagittis nisi eget rhoncus. Nam maximus diam sed turpis pretium pharetra.</p>
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin non placerat tortor. Quisque imperdiet vel enim
vitae tempor. Pellentesque nec finibus turpis, at placerat
purus.
Nam turpis metus, tristique at mi ac, cursus luctus est.
Curabitur ac dapibus tellus. Etiam consectetur sagittis
nisi eget rhoncus. Nam maximus diam sed turpis pretium
pharetra.
Tags: Headings
<h1></h1>
through
<h6></h6>
The header elements are block-level
tags that give you the ability to assign
semantic weight (importance) to your
headlines.
EXAMPLE
<h1>Hello World !!</h1>
Hello World !!
Hello World !!
Hello World !!
Hello World !!
Hello World !!
Hello World !!
Tags: Lists
<ul>
<ol>
<li>
Note
List tags are always used in nested pairs.
The wrapping tags de!ne the list type,
and indicate where the list series begins
and ends.
<ul>
<li></li>
</ul>
The <ul> (unordered list) element is a
block-level tag that wraps a series of <li>
(list item) elements. The default property
for the list items is a bullet.
EXAMPLE
<ul>
<li>Ahmed</li>
<li>Eats</li>
<li>A Lot</li>
<li>Of</li>
<li>Food</li>
</ul>
Ahmed
Eats
A Lot
Of
Food
<ol>
<li></li>
</ol>
The <ol> (ordered list) element is a
block-level tag that wraps a series of <li>
(list item) elements. The default property
for the list items is decimal (1, 2, 3).
EXAMPLE
<ol>
<li>Ahmed</li>
<li>Eats</li>
<li>A Lot</li>
<li>Of</li>
<li>Food</li>
</ol>
1.Ahmed
2.Eats
3.A Lot
4.Of
5.Food
Tags: Formatting
(partial list)
small
b (or) strong
sub
sup
del
big
q
blockquote
cite
i (or) em
EXAMPLE
""This is a quote element
This is a small element
This is a strong element
This is a delete element
><q>This is a quote element</q

><hr
><small>This is a small element</small
><hr
><strong>This is a strong element</strong
><hr
><del>This is a delete element</del
Tags: Special Elements
<br>
The <br> element is a single, inline
tag that works anywhere in the body
to create a single line break. In a <p>
element.
EXAMPLE
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
non placerat tortor.<br><br> Quisque imperdiet vel enim vitae
tempor. Pellentesque nec finibus turpis, at placerat purus. </p>
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin non placerat tortor.
Quisque imperdiet vel enim
vitae tempor. Pellentesque nec finibus turpis, at placerat
purus.
<hr>
A horizontal rule is created by

using the single tag <hr>. It is a block
level element (so it will clear the elements
above and below.
Escape & Special Characters

In HTML, some characters are reserved for the code, like brackets
(< >), ampersands (&), and quotes ( and ). Other characters, like
em & en dashes, em spaces, curly quotes, copyright symbols,
fractions, etc, are not included in the standard character sets. In
both cases, you work around this by using special codes that will
translate into those characters in the browser. Below are the ones
you will probably use the most:
&
&
“
“
&
&
–
—
©
←
→
Tags: Images
<img>
The <img> element is a single, inline

tag that works anywhere in the body
to insert a jpg, png, svg or gif !le.
Note
The <img> tag is empty;
it requires a src (source) attribute to
pull in the image into the page. It does
not require an alt tag, but if the image
is essential to the content (e.g. not a
background or decorative element), it
should have one.
EXAMPLE
<img src="images/logo.gif" alt=Acme Corp>
All <img> tags should also contain an

alt attribute. This is alternate text
that will appear if for some reason the image
link is broken or the file is unavailable.
Tags: Anchors (linking)
<a></a>
The <a> element is an inline

tag that works anywhere in the
body to create a hyperlink.
EXAMPLE
<a href="aboutme.html">About Me</a>
<a href="http://www.colum.edu">My school</a>
<a> tags are always used in pairs,
wrapping the content you want to activate
as a link. If you use an absolute URL, it
must start with http://.

HTML Basics

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Basics

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Basics

Where did those text styles come from?

Where did those text styles come from?

Tags: Basic Structure

The doctype is not actually a tag,

Tutorial: Set up a basic html

Tags: Head Tags

""This is a quote element

This is a small element

This is a strong element

This is a delete element

><q>This is a quote element</q

Tags: Special Elements

A horizontal rule is created by

Escape & Special Characters

The <img> element is a single, inline

All <img> tags should also contain an

Tags: Anchors (linking)

The <a> element is an inline

Das könnte Ihnen auch gefallen