Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Introduction To HTML

Html

Uploaded by

abiyhailu068
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Introduction To HTML

Html

Uploaded by

abiyhailu068
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 61

Introduction to HTML

Lecture 2
Learning Outcomes
See how HTML describes the structure of a web page

Learn how tags or elements are added to your document

Explore the HTML elements specification


HTML
HTML stands for HyperText Markup Language
Newspaper Page components
Headlines,

Subheadings,

Paragraphs,

Text,

Image,
HTML describes structure of pages
<html>

<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of the page. And if the page is a long one it might
be split up into several sub-headings.</p>
<h2>This is a Subheading</h2>
<p>Many long articles have subheadings to help you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level headings).</p>
<h2>Another Subheading</h2>
<p>Here you can see another subheading.</p>
</body>

</html>
HTML
HTML code is made up of characters that live inside angled brackets called
HTML elements

HTML Elements are usually made up of two tags:

an opening tag and a closing tag

Each HTML element tells the browser something about the information that
sits between its opening and closing tags
HTML Tag
HTML Tag Attributes
Attributes provide additional information about the contents of an element

They appear on the opening tag of the element and are made up of two parts:
a name and a value, separated by an equals sign
Basic HTML document structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> DOCTYPE identifies the document
<html lang="en"> as written in HTML5
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> The html element is called the
<html lang="en"> root element because it contains
<head> all the elements in the document
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> The head element contains
<html lang="en"> elements that pertain to the
<head> document that are not rendered
<meta charset="UTF-8"> as part of the content, such as its
<title>Document</title> title, style sheets, scripts, and
</head>
metadata

<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> meta elements provide document
<html lang="en"> metadata, information about the
<head> document
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> title mandatory element
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
Basic HTML document structure
<!DOCTYPE html> body element contains everything
<html lang="en"> that we want to show up in the
<head> browser window
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body
</html>
HTML5 Specification
https://html.spec.whatwg.org/
Semantic Elements in HTML5
https://html.spec.whatwg.org/#semantics
Semantic Elements in HTML5
https://html.spec.whatwg.org/multipage/sections.html#sections
<main>
The main content area of a document includes content that is unique to
that document and excludes content that is repeated across a set of
documents such as
site navigation links, copyright information, site logos and banners, and
search forms (unless the document or application’s main function is that
of a search form)
A document must not have more than one main element that does not
have the hidden attribute specified
https://html.spec.whatwg.org/#the-main-element
<section>
The section element is used to define a generic section of a document or
application

A section, in this context, is a thematic grouping of content, typically with a


heading

https://html.spec.whatwg.org/#the-section-element
<section>
Examples of sections would be

chapters, the various tabbed pages in a tabbed dialog box, or the


numbered sections of a thesis

A web site's home page could be split into sections for an introduction,
news items, and contact information

It’s important to note that this element isn’t intended for styling purposes
<nav>
The nav element is used to wrap major navigational links to other pages or
parts within the same page

https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
<article>
The article element represents a complete, or self-contained, composition
in a document, page, application, or site and that is, in principle,
independently distributable or reusable, e.g. in syndication

https://html.spec.whatwg.org/multipage/sections.html#the-article-element
<article>
When article elements are nested, the inner article elements represent
articles that are in principle related to the contents of the outer article

For instance,

a blog entry on a site that accepts user-submitted comments could


represent the comments as article elements nested within the article
element for the blog entry
<article>
Examples:

a forum post, a magazine or newspaper article, a blog entry, a


user-submitted comment, an interactive widget or gadget, or any other
independent item of content
<aside>
The aside element is used for content that is tangentially related to the
content around it

It can be used for side-bars, pull quotes, advertising, and groups of navigation
elements

https://html.spec.whatwg.org/multipage/sections.html#the-aside-element
<header>
The header element represents a group of introductory or navigational
aids

A header element is intended to usually contain a heading (an h1–h6


element or an hgroup element), but this is not required

The header element can also be used to wrap a section's table of contents, a
search form, or any relevant logos

https://html.spec.whatwg.org/multipage/sections.html#the-header-element
<footer>
The footer element represents a footer for its nearest ancestor sectioning
content element, or for the body element if there is no such ancestor

A footer typically contains information about its section such as

who wrote it, links to related documents, copyright data, and the like

https://html.spec.whatwg.org/multipage/sections.html#the-footer-element
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
These elements represent headings for their sections

https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,
-and-h6-elements
<hgroup>
The hgroup element represents a heading and related content
The element may be used to group an h1–h6 element with one or more p
elements containing content representing a subheading, alternative title, or
tagline

https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element
<hgroup>
<hgroup>

<h1>The reality dysfunction</h1>

<p>Space is not the only void</p>

</hgroup>
Grouping Contents
https://html.spec.whatwg.org/multipage/grouping-content.html
<P>
The p element represents a paragraph

https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-elemen
t
<hr>
The hr element represents a paragraph-level thematic break, e.g. a scene
change in a story, or a transition to another topic within a section of a
reference book

https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-eleme
nt
<blockquote>
The blockquote element represents a section that is quoted from another
source

https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquo
te-element
<ol>
The ol element represents a list of items, where the items have been
intentionally ordered, such that changing the order would change the
meaning of the document

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-eleme
nt
<ul>
The ul element represents a list of items, where the order of the items is
not important — that is, where changing the order would not materially
change the meaning of the document

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-eleme
nt
<menu>
The menu element represents a toolbar consisting of its contents, in the form
of an unordered list of items (represented by li elements), each of which
represents a command that the user can perform or activate

https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-ele
ment
<figure>
The figure element represents some flow content, optionally with a caption,
that is self-contained (like a complete sentence) and is typically referenced as
a single unit from the main flow of the document

The element can be used to annotate illustrations, diagrams, photos, code


listings, etc.

https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-ele
ment
<div>
The div element has no special meaning at all

It represents its children

It can be used with the class, lang, and title attributes to mark up
semantics common to a group of consecutive elements.
Text-Level Semantics
https://html.spec.whatwg.org/multipage/text-level-semantics.html#usage-sum
mary
<a>
If the a element has an href attribute, then it represents a hyperlink (a
hypertext anchor) labeled by its contents

The target, download, ping, rel, hreflang, type, and referrerpolicy


attributes must be omitted if the href attribute is not present

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-elem
ent
<em>
The em element represents stress emphasis of its contents

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-ele
ment
<strong>
The strong element represents strong importance, seriousness, or urgency
for its contents

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong
-element
<data>
The data element represents its contents, along with a machine-readable
form of those contents in the value attribute

The value attribute must be present. Its value must be a representation of the
element's contents in a machine-readable format

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-data-el
ement
<sup>, <sub>
The sup element represents a superscript and the sub element represents a
subscript

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sub-an
d-sup-elements
<i>
The i element represents a span of text in an alternate voice or mood, or
otherwise offset from the normal prose in a manner indicating a different
quality of text, such as a taxonomic designation, a technical term, an
idiomatic phrase from another language, transliteration, a thought

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-elem
ent
<b>
The b element represents a span of text to which attention is being drawn
for utilitarian purposes without conveying any extra importance and with no
implication of an alternate voice or mood, such as

keywords in a document abstract, product names in a review, actionable


words in interactive text-driven software, or an article lede

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-elem
ent
<span>
The span element doesn't mean anything on its own, but can be useful when
used together with the global attributes, e.g. class, lang, or dir

It represents its children


<br>
The br element represents a line break.

br elements must be used only for line breaks that are actually part of the
content, as in poems or addresses.

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-ele
ment
Embedded content
https://html.spec.whatwg.org/multipage/embedded-content.html
<picture>
The picture element is a container which provides multiple sources to its
contained img element to allow authors to declaratively control or give
hints to the user agent about which image resource to use, based on the
screen pixel density, viewport size, image format, and other factors

It represents its children

https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture
-element
<img>
An img element represents an image

The image given by the src and srcset attributes is the embedded content

The value of the alt attribute provides equivalent content for those who
cannot process images or who have image loading disabled

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-ele
ment

https://html.spec.whatwg.org/multipage/images.html
<img>
The src attribute must be present, and must contain a valid non-empty
URL potentially surrounded by spaces referencing a non-interactive, optionally
animated, image resource that is neither paged nor scripted
<iframe>
The iframe element represents its nested navigable

The src attribute gives the URL of a page that the element's nested navigable
is to contain. The attribute, if present, must be a valid non-empty URL
potentially surrounded by spaces

https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-ifram
e-element
<video>
A video element is used for playing videos or movies, and audio files with
captions

The src, crossorigin, preload, autoplay, loop, muted, and controls attributes
are the attributes common to all media elements

The poster attribute gives the URL of an image file that the user agent can
show while no video data is available

https://html.spec.whatwg.org/multipage/media.html#the-video-element
<audio>
An audio element represents a sound or audio stream

The src, crossorigin, preload, autoplay, loop, muted, and controls attributes
are the attributes common to all media elements

https://html.spec.whatwg.org/multipage/media.html#the-audio-element
Forms
https://html.spec.whatwg.org/multipage/forms.html#forms
<form>
The form element represents a hyperlink that can be manipulated through a
collection of form-associated elements, some of which can represent editable
values that can be submitted to a server for processing

https://html.spec.whatwg.org/multipage/forms.html#forms
Tabular Data
https://html.spec.whatwg.org/multipage/tables.html#tables
<table>
The table element represents data with more than one dimension, in the
form of a table

Tables have rows, columns, and cells given by their descendants

The rows and columns form a grid; a table's cells must completely cover that
grid without overlap

https://html.spec.whatwg.org/multipage/tables.html#tables

You might also like