Chap 2 PDF

Chapter Two HTML Basic
HTML Basics
The World Wide Web is constructed from many millions of individual pages, and those pages
are, in general, written in Hypertext Markup Language, better known as HTML. The Hyper Text
Markup Language (HTML) is an application for marking up documents for inclusion in the
World Wide Web. We use it to mark up our text documents so that web browsers know how to
display them and todefine hypertext links within them to provide navigation within or between
them.HTML allows you to:
• Publish documents to the Internet in a platform independent format
• Create links to related works from your document
• Include graphics and multimedia data with your document
• Link to non-World Wide Web information resources on the Internet
HTML was originally intended to be used for encoding document structures. While there are
now many formatting and formatting-like tags, there are also numerous tags that apply to text
structures like headings, paragraphs and tables.
What is Markup?
To use HTML, you must understand the concept of markup:
• Markup is the act of inserting additional text into a document which is not usually visible
to the reader, and is not part of the content, but enhances the document in some way, such
as capturing document structure or adding hypertext capability
• Markup also refers to the additional text, also known as tags, which are inserted in the
document.
HTML Markup
HTML tags are used to markup the structure of a document, and embed basic formatting
information that the browser can use to decide how to display the content. HTML has two types
of markup: tags and character entities.
• Tags are constructed of brackets between which the tag is placed. Tags are placed around
segments of text, so there is usually a companion end tag which is identical to the start
tag except it includes a forward slash. Here are start and end tags for a title:
<TITLE>Introduction to HTML</TITLE>
• HTML also includes markup called character entities. These are used to include
international characters as well as characters usually included in tags as markup. Entities
1
BY Abdela A/2020
start with an ampersand, followed by the entity name and end with a semicolon. For
example, nonbreaking space entity, “ ”
HTML Files
Creating an HTML file is pretty simple. You start it with a starting HTML tag, <html>, and end
it with a closing HTML tag, </html>. Everything in-between is the content of your file. The only
other requirement for an HTML file is that all HTML documents must have a filename extension
of .html or .htm. For example: sample.html
The browser looks at the filename extension and knows to interpret the file as HTML tags rather
than straight ascii text.
Our First HTML Document

Let’s jump right in and create a simple HTML document. Open your chosen editor (for instance
Notepad) and enter the text in figure 1.5. The HTML markup elements (often referredto as tags)
are the character strings enclosed by < and >.
Figure 1.5: html tag in a notepad

Once you finish writing, save the file with “.html” extension, such as sample.html.If you now
open the file you saved and load the page into your favorite browser, such as Internet Explorer or
Firefox, you should see something like the window displayed in Figure 1.7
2
BY Abdela A/2020
Figure 1.7 out first html page display in Google chrome
HTML Document Structure:

An HTML document starts and ends with <html> and </html> tags. These tags tell the browser
that the entire document is composed in HTML. Inside these two tags, the document is split into
two sections:
• The <head>...</head> elements, which contain information about the document such as
title of the document, author of the document etc. Information inside this tag does not
display outside.
• The <body>...</body> elements, which contain the real content of the document that you
see on your screen.
HTML tag elements

HTML language is a markup language and we use many tags to markup text. Every tag consists
of a tag name, sometimes followed by an optional list of tag attributes, all placed between
opening and closing brackets (< and >). The simplest tag is nothing more than a name
appropriately enclosed in brackets, such as <head> and <i>. More complicated tags contain one
or more attributes, which specify or modify the behavior of the tag.
According to the HTML standard, tag and attribute names are not case-sensitive. There's no
difference in effect between <head>, <Head>, <HEAD>, or even <HeaD>; they are all
equivalent. But with XHTML, case is important: all current standard tag and attribute names are
in lowercase.
HTML Basic Tags
The basic structure for all HTML documents is simple and should include the following
minimum elements or tags:
<html> - The main container for HTML pages
3
BY Abdela A/2020
<head> - The container for page header information
<title> - The title of the page
<body> - The main body of the page
Remember that before an opening <html> tag, an XHTML document can contain the optional
XML declaration, and it should always contain a DOCTYPE declaration indicating which
version of XHTML it uses
1. HTML formatting tags
Create Paragraph - The <p> Element:

The <p> element offers a way to structure your text. Each paragraph of text should go in
between an opening <p> and closing </p> tag as shown below in the example:
<h1>This is heading 1</h1>
HTML Lines
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>This is a paragraph.</p>
<hr>
<hr>
HTML Paragraphs
Paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
4
BY Abdela A/2020
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:

Comments are not displayed by the browser, but they can help document your HTML.
Example


Adding Background Colors
There is nothing like a splash of color to add visual interest to a publication. We will change the
background color and text color for the entire sample.htm page.
<body bgcolor=”#FFFF00” text=”#0000FF”>

Formatting with Fonts
In HTML, you can change your fonts in various ways. You can change the typeface, color, and
size. Asfor typeface, it recommended that you stick with the basic fonts such as Times New
Roman and Arialbecause the way fonts display depends on each person’s computer.
Example
<font face=”Arial” size=”-2” color=”#FF7F00”>
Created on Month, Day, Year <br>
Your class name <br>
College of Charleston <br></font>
Indenting Text
Generally, shorter lines of text look more friendly to the reader. Therefore, indenting the text
addsvisual appeal. An easy way of indenting paragraphs is with the <blockquote> tag.
Example
<blockquote>
At the end of your paragraph turn off the indention by typing:
</blockquote>
5
BY Abdela A/2020
HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it
contains attributes only, and has no closing tag.To display an image on a page, you need to use
the src attribute. Src stands for "source". The value of the src attribute is the URL of the image
you want to display.
Syntax for defining an image:
<imgsrc="url" alt="some_text">
The URL points to the location where the image is stored. The browser displays the image where
the <img> tag occurs in the document. If you put an image tag between two paragraphs, the
browser shows the first paragraph, then the image, and then the second paragraph.
Example
<img src="image.jpg" alt="Servers.com" width="104" height="142">
HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed. The value of the alt attribute is an author-defined text:
<imgsrc="smiley.gif" alt="Smiley face">
HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image. The
attribute values are specified in pixels by default:
<imgsrc="smiley.gif" alt="Smiley face" width="42" height="42">
HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"
Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="/index.html">This is a link</a>
6
BY Abdela A/2020
Note: The link address is specified in the href attribute.
The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can
includescripts, instruct the browser where to find style sheets, provide meta information, and
more.The following tags can be added to the head section: <title>, <style>, <meta>, <link>,
<script>, <noscript>, and <base>.
The HTML <title> Element
The <title> tag defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
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
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html >
The HTML <base> Element
The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.server.com/images/" target="_blank">
</head >
The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.The <link>
tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head >
7
BY Abdela A/2020
The HTML <style> Element

The <style> tag is used to define style information for an HTML document. Inside the <style>
element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
The HTML <meta> Element

Metadata is data (information) about data. 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.
The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
• <meta> tags always go inside the <head> element
Examples of Use
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
• Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
• Define the author of a page:
<meta name="author" content="HegeRefsnes">
• Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
The HTML <script> Element
The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element
will be explained in a later chapter.
HTML Tables
Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag.
8
BY Abdela A/2020
• (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for
table data)
• A row can also be divided into headings with the <th> tag. (th stands for table heading)
• The <td> elements are the data containers in the table
•The <td> elements can contain all sorts of HTML elements like text, images, lists, other
tables, etc.
Example 1:
<table style="width:300px">
<tr>
<td>First name</td>
<td>Second name</td>
<td>Age</td>
</tr>
<tr>
<td>Lemma</td>
<td>Girma</td>
<td>94</td>
</tr>
</table>
Example 2
<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Lemma</td>
<td>Girma</td>
<td>54</td>
</tr>
</tr>
</table>
9
BY Abdela A/2020
HTML list
HTML Unordered Lists: An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag. The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:

• Coffee
• Milk
HTML Ordered Lists: An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag. The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
TML Description Lists:A description list is a list of terms/names, with a description of each
term/name.
• The <dl> tag defines a description list
• The <dl> tag is used in conjunction with <dt> (defines terms/names) and
• <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
10
BY Abdela A/2020

Coffee
- black hot drink
Milk
- white cold drink
Creating HTML Links

Links are the essence of the Internet because they allow you to move around easily on the web.
Thereare several kinds of links:
• Links to pages within your site (inter-site link)
• Links to other websites (remote links)
• Email links
• Links within the same page (Intra-page links)
Example 1:
<a href=”http://www.aau.edu.et.edu”>Addis Ababa University</a>
The tag that creates a link is simply “a” tag with an attribute. So far, we have not taken the time
to dissectwhat each code means, because most of them are obvious. The link tag breakdown as
follows:
• “a” This means Anchor
• “href=”http://www.aau.edu.et” This means Hypertext Reference. For remote sites, you
must type the entire web address.
• “Addis Ababa University” This is the title or description of the site or a link text.
• “</a>”: The ending anchor.
Example 2.
<a href=”home.htm”>Home</a>
This example shows how to link to an html file with in the same webpage.
“Home” :is the link text
“home.htm”: is the html file to open when the Home link is clicked.
Email Links
You created links in remote and internal the exercises above. Another kind of link is the email.
Theformat of an e-mail address is as follows:
11
BY Abdela A/2020
<ahref="mailto:yourname@domain.com">…</a>
where:
<A The beginning anchor or link
HREF Refers to the place that will be linked
mailto: The special tag for linking to email
yourname@domain.com> Your email address
… Any text you want to display
</a> The end of the Anchor tag
Example
Please email us at: <a href=”mailto:ourmail@yahoo.com”>
Contact us</a>
HTML Forms
HTML forms are used to pass/ submit data from the client to a server. An HTML form can
contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A
form can also contain select lists, textarea, fieldset, legend, and label elements, pull-down menus,
clickable images.
The <form> tag is used to create an HTML form:
<form>
.input elements
</form>
All of the form elements within a <form> tag comprise a single form. The browser sends all of
the values of these elements - blank, default, or user modified - when the user submits the form
to the server.
Browsers flow forms into the containing elements as if they were small embedded images. So
layout elements such as <p> and <br> need to be used.
Form Attributes
• action - gives the URL of the application that is to receive and process the forms data;
most of these are kept in cgi-bin or cgi-win; Common Gateway Interface binaries;
Example:
<form action="server.php" ...</form>
• enctype - the browser encodes the form's data before it is passed to the server. The server
may then decode the parameters or pass them still encoded to the application; standard
encoding format is Internet Media Type named "application/x-www-form-urlencoded";
only other type is "multipart/form-data"
12
BY Abdela A/2020
• method - sets the HTTP method that the browser uses to send the form's data to the
server for processing; Either POST or GET;
Example: <form method=GET action="server.php" ...</form>
POST/ GET methods
Post
The browser sends the data in two steps:
• contacts the form processing server specified in the action attribute;
• sends the data to the server in a separate transmission;
On the server side POST-style applications are expected to read the parameters from a standard
location once they begin execution.
GET
Contacts the form-processing server and sends the form data in a single transmission step:
• the browser appends the data to the form's action URL, separated by the ? character
Some rules of thumb about which to use
• Send small forms with a few short fields via the GET method for better form
transmission performance;
• Some server operating systems limit the length of command line arguments that can be
passed to an application. Use the POST method;
• If security is an issue, choose POST because GET places the form parameters directly
in the application URL (easily captured by network sniffers); POST can take advantage
of encryption when transmitting the parameters as a separate transaction;
HTML Forms - The Input Element

The most important form element is the <input> element.The <input> element is used to select
user information. An <input> element can vary in many ways, depending on the type attribute.
An <input> element can be of type text field, checkbox, password, radio button, submit button,
and more. The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
13
BY Abdela A/2020
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Note: The characters in a password field are masked (shown as asterisks or circles).
Multiple-Line Text Input Controls:
If you want to allow a visitor to your site to enter more than one line of text, you should create a
multiple-line text input control using the <textarea> element.
<form action="action.php" method="get">

Description :<br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<input type="submit" value="submit" />
</form>
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a
limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female
14
BY Abdela A/2020
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I have a bike
I have a car
Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:
<form name="input" action=" action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "action.php". The page will show you the received input.
Drop-down menu or list
A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
Additional arguments:
• size: the number of items visible in the list (default is "1")

• multiple: if set to "true", any number of items may be selected (default is "false")
15
BY Abdela A/2020
A complete example
If you would like to provide your web site visitors with a simple way to contact you from your
website, but really don't want to display your email address, this HTML form code may be what
you'relooking for.You can create a simple form, as displayed below, to enable your visitors to
send you comments,questions, product support requests, or whatever you'd like.
A complete example code for the above form showed in the picture is as follows
<HTML>
<BODY>
<FORM action="mailto:you@yourdomain.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD>
<TD width="70%"><INPUT type="text" name="name" size="20"></TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV></TD>
<TD><INPUT type="text" name="email" size="20"></TD>
</TR>
<TR>
<TD align="right"><b>Comment:</b></td><td><LABEL>
<TEXTAREA name="textarea"></TEXTAREA>
</LABEL>
</TD>
</TD>
<TR>
16
BY Abdela A/2020
<TD><DIV align="right"></DIV></TD>
<TD><INPUT type="submit" value="Submit" name =”send”></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
17
BY Abdela A/2020

Chap 2 PDF

Uploaded by

Copyright:

Available Formats

Chap 2 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chap 2 PDF

Uploaded by

Copyright:

Available Formats

Chapter Two HTML Basic

Our First HTML Document

Figure 1.5: html tag in a notepad

Figure 1.7 out first html page display in Google chrome

HTML Document Structure:

HTML tag elements

1. HTML formatting tags

Create Paragraph - The <p> Element:

HTML Formatting Tags

<body bgcolor=”#FFFF00” text=”#0000FF”>

HTML Images - The <img> Tag and the Src Attribute

HTML Images - The Alt Attribute

HTML Images - Set Height and Width of an Image

The HTML <head> Element

The HTML <link> Element

The HTML <style> Element

The HTML <meta> Element

How the HTML code above looks in a browser:

How the HTML code above looks in a browser:

Creating HTML Links

HTML Forms - The Input Element

<form action="action.php" method="get">

• size: the number of items visible in the list (default is "1")

You might also like