Scribd
Upload
15 views19 pages

Htmlcourse 2 Beginners

The document provides an overview of an HTML training course organized into 4 weeks. Week 1 covers introduction to HTML and HTML document structure. Week 2 covers hyperlinks and embedded content. Week 3 covers tables and forms. Week 4 covers sections, style, and scripts. Each week is broken down into topics that will be covered such as links, images, lists, and so on.

Uploaded by

manar mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views19 pages

Htmlcourse 2 Beginners

The document provides an overview of an HTML training course organized into 4 weeks. Week 1 covers introduction to HTML and HTML document structure. Week 2 covers hyperlinks and embedded content. Week 3 covers tables and forms. Week 4 covers sections, style, and scripts. Each week is broken down into topics that will be covered such as links, images, lists, and so on.

Uploaded by

manar mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Src url: https://www.w3.

org/wiki/HTML/Training

Contents
 1 Week 1

 1.1 Introduction to HTML


 1.2 HTML Document

 2 Week 2

 2.1 Hyper Links


 2.2 Embedded contents

 3 Week 3

 3.1 Tables
 3.2 Forms

 4 Week 4

 4.1 Sections
 4.2 Style and Script

1.1 Introduction to HTML


What is HTML

HTML is a Markup Language for creating Web pages.

Description
HTML stands for HyperText Markup Language. It is used to creating Web pages. That is,
Web page all over the world consists of HTML.

<!doctype html>
<html lang="en">
<head>
<title>Sample Web page</title>
</head>
<body>
<p>Here is a paragraph</p>
</body>

Decomposition of HTML elements


HTML Elements comes usually by tag pairs.

For opening a simple element with a start tag

1. it starts with <


2. then a list of characters without space, the tagname (or element)
3. ends usually with a >. closing the simple element with a end tag

If the tagname is "cite", then you get

<cite></cite>
Some elements do not have an end tag (because they are implied by the following tags). For
example you might have seen.

<br/>

An element can have attributes(creiteria) to refine its meaning.


it has to be quoted using either single or double quotes. The value, along with the "=" character,
can be omitted altogether if the value is the empty string.

These are examples of syntaxes you might see on the Web:

<!-- empty attributes -->


<input disabled="">
<input disabled=""/>

<!-- attributes with a value -->

<input name='address'>
<input name="address">
__________

Create HTML

You can write HTML using just NotePad on Windows

Let's make a HTML document.

1. Open the NotePad(Windows users)

2. Write the following example.

<html>
<head>
<title>this is the title of the page</title>
</head>
<body>
Hello!
</body>
</html>

Saving the file


File name's rules are as follows:

 use either the ".htm" or the ".html" file extension.


 use only alphabets, numbers, "-(hyphen)" and "_(underscore)".
Web browsers
Web browser is a software application for viewing the Web pages. There are a lot of kinds of
Web browser and be used by each favor of the person who sees the Web pages:

 Internet Explorer(Microsoft)
 Firefox(Mozilla)
 Chrome(Google)
 Safari(Apple)
 Opera(Opera)

try it

Let's view your HTML document on the Web browser.

1. Open the Web browser that you like.

2. Drag & Drop the HTML document file to Web browser.

_______

2-HTML/Training/HTML Document
html element

The html element represents the root of an HTML document.

 The html element should always have a lang attribute. The lang attribute Specifies the primary
language for the contents of the element. For example, "en" means "English", "fr" means
"French".
 The <html> ... </html> contains a head element followed by a body element.

<html lang="en">

</html>

head element

The head element represents a collection of metadata for the Document.

 The <head> ... </head> contains the title, and information on style sheets and scripts.
 Contents in the head tag are not displayed on a Web browser.

<head>

</head>
body element

The body element represents the main content of the document.

 The <body> ... </body> contains the markup with the visible content.

<body>
Here is the visible content
</body>
_______________

title
Web page's title is specified by <title>.

 Title is used in a title bar of Web browsers, user's history, bookmarks, or in search results.
 You should use titles that identify their documents even when they are used out of context.

<title>About W3C | World Wide Web Consortium(W3C)</title>

try it

Let's create the Web page

1. describe the Web page's title between <title> ... </title>.

<html>
<head>
<title>this is the title of the webpage</title>
</head>
<body></body>
<html>

2. Check the Web browsers.

Basic content

Heading
Headings are specified by <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

 <h1> is said to have the highest rank, <h6> has the lowest rank, and two elements with the
same name have equal rank.

<html>
<head></head>

<body>
<h1>h1 example</h1>
<h2>h2 example</h2>
<h3>h3 example</h3>
<h4>h4 example</h4>
<h5>h5 example</h5>
<h6>h6 example</h6>
</body>
</html>

Paragraph
Paragraphs are specified by <p>.

<p>This is paragraph 1</p>


<p>This is paragraph 2</p>
Line
horizontal rules are specified by <hr>.

The hr element can omit end element. This is because It is empty element.

<p>This is paragraph 1</p>


<hr>
<p>This is paragraph 2</p>

List
unordered list

Unordered list is specified by <ul> and <li>.


 The items of the list are the li element child nodes of the ul element.
If you would like to make 3 list items, you should specify 3 li elements.

<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>

ordered list

Ordered list is specified by <ol> and <li>.

 The items of the list are the li element child nodes of the ol element.

<ol>
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</ol>
definition list
Definition list is specified by <dl>, <dt> and <dd>.

<dl>
<dt>tarm1</dt>
<dd>difinition1</dd>
<dt>tarm2</dt>
<dd>difinition2</dd>
</dl>
try it

1. Create Web page's content that introduce your shop

[index.html]

<html >
<head>
<title>my shop</title>
</head>
<body>
<h1>my shop h1</h1>
<ul>
<li>menu</li>
<li>location</li>
<li>about us</li>
</ul>
<h2>new branch</h2>
<p>26 January 2011</p>
<p>
text text text text text text text text text text text text text text text
text text text text text
text text text text text text text text text text text text text text text
text text text text text
text text text text text text text text text text text text text text text
text text text text text
text text text text text text text text text text text text text text text
text text text text text
</p>
<h2>new menu</h2>
<p>26 January 2011</p>
<p>
text text text text text text text text text text text text text text text
text text text text text
text text text text text text text text text text text text text text text
text text text text text
text text text text text text text text text text text text text text text
text text text text text
text text text text text text text text text text text text text text text
text text text text text
</p>
<p>your shop</p>
</body>
</html>

2. Check your Web browsers.


Week 2
HTML/Training/Hyper Links

What is Hyper Links


Start of the World Wide Web is the ability to define links from one page to another, and to
follow links at the click of a button. This is Hyperlink.

Hyper Links
Hyper Links are specified by <a>.
Linked document is represented by the href attribute.

[syntax]

<a href="URL">Link label</a>

try it

Let's link to Google.

1. Enclose the link text between <a> and </a>.

<a>Go to Google</a>
2. Specifies the href attribute.

<a href="http://www.google.com/">Go to Google</a>


Relative paths or Absolute URL
Relative path

 Linking to be in a same folder/directory:


[Syntax]

<a href="file.html"> file.html label</a>

ex) [b.html-c.html]

<a href="c.html"> c.html label</a>

 Linking to be in a parent folder/directory:

[Syntax]

<a href="../file.html"> file.html label</a>

ex) [b.html-a.html]

<a href="../a.html"> c.html label</a>

 Linking to be in a subdirectory:

[Syntax]

<a href="directory/file.html"> file.html in directory folder label</a>

absolute URL

 Linking to a page on another Web site.

<a href="URL">Link label</a>

Challenge
1. Links to other pages in our Web site.

[index.html]

<ul>
<li><a href="menu.html">menu</a></li>
<li><a href="location.html">location</a></li>
<li><a href="about.html">about us</a></li>
</ul>
HTML/Training/Link options

Link options

In which window to open the link document


In which window to open the link document is specified by the target attribute.
If you would like to open new window, you should use "_blank" for value of the target attribute.

<a href="http://www.yahoo.com/" target="_blank">yahoo</a>

 _blank: Open the new window.

 _self: Open the current one.

 _parent: Open the parent browsing context of the current one.

 _top: Open the most top-level browsing context of the current one.

Link that specifies position of Web page


Link that specifies position of Web page is specified by the id attribute.
The id attribute specifies that its a element is a named hyperlink, with the name given by the
value of this attribute.

1. Specifies the id attribute.

<h2 id="top">Top</h2>

2. The a element with the href attribute. Value of the href attribute is a named hyperlink that you
would like to link.

<a href="#top">Go back top</a>


Challenge

1. Specifies the name linked anchor by the id attribute.

[menu.html]

<h2 id="food">Food</h2>
<h2 id="drink">Drink</h2>

2. Specifies the link text by <a>.

[menu.html]

<p><a href="#food">Food</a> | <a href="#drink">Drink</a>


HTML/Training/Image

HTML Images
<body>
<h1><img src="images/logo.png" alt="W3C" width="90" height="53"></h1>
</body>

Image
Images are specified by <img>.

 The img element can omit end element. This is because It is empty element.
 The image given by the src attribute is the embedded content.
SRC stands for source.

[syntax]

<img src="URL">

 The images are often save on images folder.

<img src="images/logo.png">

Alternative text
You can specify an alternative text for a image.
The value of the alt attribute give an alternative text for a image.

 The intent is that replacing every image with the text of its alt attribute not change the
meaning of the page.

<img src="images/logo.png" alt="W3C">

Image size
Images size are specified by the width attribute and the height attribute.

 The width and height aren't strictly necessary but help to speed the display of your Web page.

<img src="images/logo.png" alt="W3C" width="90" height="53">


Challenge
try it

1. Let's embed the logo image.

[index.html]

<h1><img src="images/logo.png" alt="W3C cafe" width="249" height="107"></h1>

2. Check your Web browsers.


HTML/Training/Video

HTML Videos
<video controls src="movie.mov">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>

Embedded videos
The embedded videos are specified by <video>.
There are two way of specifying the embedded content.

The src attribute

The image given by the src attribute is the embedded content.


SRC stands for source.

<video src="movie.mov">
</video>

The source element

The <source> element allows authors to specify multiple alternative media resources for media
elements.

<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1, mp4a"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Fallback contents

The fallback contents are contained between <video> ... </video>.

<video src="movie.ogv">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>

You might also like