Scribd
Upload
15 views

Chapter Two

Uploaded by

kaleb123 shumu12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Chapter Two

Uploaded by

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

Chapter Two

Hypertext Mark-up Language (HTML)


General concepts of Web design
Web design refers to the design of websites that are displayed on the internet. It usually refers to
the user experience aspects of website development rather than software development. Web
design used to be focused on designing websites for desktop browsers; however, since the mid-
2010s, design for mobile and tablet browsers has become ever-increasingly important.

A web designer works on the appearance, layout, and, in some cases, content of a website.
Appearance, for instance, relates to the colors, font, and images used. Layout refers to how
information is structured and categorized. A good web design is easy to use, aesthetically
pleasing, and suits the user group and brand of the website. The two most common methods for
designing websites that work well both on desktop and mobile are responsive and adaptive
design. In responsive design, content moves dynamically depending on screen size; in adaptive
design, the website content is fixed in layout sizes that match common screen sizes. Preserving a
layout that is as consistent as possible between devices is crucial to maintaining user trust and
engagement.
Basics of HTML

HTML stands for Hypertext Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. A markup language is used to define the text document within tag,
which defines the structure of web pages. This language is used to annotate (make notes for the
computer) text so that a machine can understand it and manipulate text accordingly. Most
markup languages (e.g. HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text. In another word, markup language is a computer
language that defines the structure and presentation of raw text.

Prepared by: Firomsa K.


HTML Elements and Tags

HTML tags and their attributes


HTML tag is a set of characters constituting a formatted command for a Web page. It provides the
directions or recipes for the visual content that one sees on the Web. HTML tags are case
insensitive and include tags for references, tags for tables, tags for headlines or titles. An HTML
tag consists of the tag name in angular brackets and may come in pair, which makes up the
beginning and ending tag that frame a particular piece of code, text or other tags. The beginning
tag consists of the name, optionally followed by one or more attributes, whereas the ending tag
consists of the same name preceded by a forward slash ("/"). HTML tags contain three main
parts: opening tag, content and closing tag. For example, the HTML tag "<p>" begins a
paragraph, whereas "</p>" ends that paragraph. When a web browser reads an HTML document,
browser reads it from top to bottom and left to right. HTML tags are used to create HTML
documents and render their properties. Each HTML tags have different properties. Generally,
HTML tag have the following rules:

 All HTML tags must enclosed within < > these brackets.
 Every tag in HTML performs different tasks.
 If you have used an open tag <tag>, then you must use a close tag </tag>
(except some tags)

HTML Tag syntax: <tag>…. </tag>

HTML has also an attribute that provides additional information about the html elements.
Example <body bgcolor=”red”> tells the browser that the background of the page should be red.
Attributes always come in name/value pairs like name=value. Attributes are always added to the
start tag of an HTML element. Attribute values should always be enclosed in quotes. Double
style quotes are the most common, but single style quotes are also allowed. In some rare cases,
like when attribute value itself contains quotes, it is necessary to use single quotes. Example
name=’John “ShotGun” Nelson ’

Prepared by: Firomsa K.


HTML Elements

An HTML element is an individual component of an HTML document. HTML uses


predefined tags and elements, which tell the browser how to properly display the content. Most
HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with
content in between. For example, the title element represents the title of the document. It
consists of start and end tags with the content inserted in between them.

Nested HTML element is an HTML element, which is used inside another HTML Element.
Here, <html> tag contains the <head> and <body>. The <head> and <body> tag contains
another elements so it is called nested element. In HTML concept, there are an HTML element
which do not require to have start tag and end tag, some elements does not have content and end
tag such elements are known as Void elements or empty elements. These elements are also called
as unpaired tag. Some Void elements are <br> (represents a line break), <hr> (represents a
horizontal line), <img> (used to embed an image in an HTML page) and etc.
Syntax: <tag>Contents</tag>. HTML elements and tags can be shown as follows:

The following HTML code defines ways of using tags and elements

<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
</body>
</html>

Prepared by: Firomsa K.


Basic HTML Tags and their definition
SN Tags Description
1. <html> Define an HTML document
2. <body> Define the document’s body
3. <h1>to<h6> Define header one to header six
4. <p> Define a paragraph
5. <br> Insert a single line break
6. <hr> Define a horizontal rule
7. <!--> Define a comment

HTML Text Formatting and Background Changing

HTML Formatting refers to the enhancing of text in order to increase the visual appeal. HTML
provides a range of formatting tags that can be used to make the text attractive to the users. The
followings are some of HTML text formatting techniques we can apply using commonly known
HTML tags.

HTML Headings

HTML headings range from 1 to 6. The heading defined within <h1> is the more important i.e.
larger font-size and font-weight whereas <h6> is the least important i.e. least font-size. Example:

<html>
<head> <title>Data Flair</title>

</head>
<body>
<h1>Data Flair Heading 1</h1>
<h2>Data Flair Heading 2</h2>
<h3>Data Flair Heading 3</h3>
<h4>Data Flair Heading 4</h4>
<h5>Data Flair Heading 5</h5>
<h6>Data Flair Heading 6</h6>
</body>
</html>

Prepared by: Firomsa K.


HTML Bold text

This is defined by the <b> tag. This is a physical tag which is used to display the text in Bold.
For example:

<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p><b>Welcome to Data Flair!</b></p>
</body>
</html>

HTML Strong Element

It displays the content in a manner such that it appears as important. For Example:

<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p><strong>Welcome to Data Flair!</strong></p>
</body>
</html

HTML Underlining the text

In HTML, the text can be underlined using the <u> element, in order to emphasize on its
importance. For example:

Prepared by: Firomsa K.


<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p>Welcome to Data Flair!</p>
<p><u>Welcome to Data Flair!</u></p>
</body>
</html>

HTML Highlight

In HTML, the <mark> element is used to highlight the text. For example:
<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p><mark>Welcome to Data Flair!</mark></p>
</body>
</html>

HTML Small text

This element is used to define small texts, which can be used to add comments, notes, copyright,
etc. For example:

<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p><small>Welcome to Data Flair!</small></p>
</body>
</html>

Prepared by: Firomsa K.


HTML Superscript and Subscript
 <sup>- displays the content in superscript.
 <sub>- displays the content in subscript.
For example:

<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p><small>Welcome to Data Flair!<sup>E-learning!</sup></small></p>
<p><small>Welcome to Data Flair!<sub>E-learning!</sub></small></p>
</body>
</html>

HTML Italicize and Emphasize

The <i> element is used to display the text it contains in italics. The <em> element displays the
text in italics along with semantic importance i.e. it emphasizes the text. For example:

<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p><i>Welcome to Data Flair!</i></p>
<p><em>Welcome to Data Flair!</em></p>
</body>
</html>

HTML Striking through and Inserting


In HTML, the <del> element is used to display a deleted text on the web-page, done by striking
through the text, and the <ins> element is used to display the inserted text, shown underlined.
For example:

Prepared by: Firomsa K.


<html>
<head>
<title>Data Flair</title>
</head>
<body>
<p>Welcome to Data Flair!</p>
<p><del>Welcome to Data Flair!</del></p>
<p><ins>Welcome to Data Flair!</ins></p>
</body>
</html>

HTML Grouping content

The <div> and <span> elements are used to group similar content together and create sections or
subsections. The <span> element groups inline elements only. For example:

<html>
<head>
<title>Data Flair</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "#">HOME</a> |
<a href = "#">CONTACT</a> |
<a href = "#">ABOUT</a>
</div>
<p>This is the example of <span>span tag</span>
</p>
</body>
</html>

Text formatting with HTML and background changing

To set the background color in HTML, use the style attribute. The style attribute specifies an
inline style for an element. The attribute is used with the HTML <body> tag, with the CSS
property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS
style is used to add background color. The bgcolor attribute deprecated in HTML5. Example, we
can use the following code to set the background color in HTML:

Prepared by: Firomsa K.


<html>

<head>

<title>HTML Backgorund Color</title>

</head>

<body style="background-color:grey;">

<h1>Products</h1>

<p>This is the example to add background color.</p>

</body>

</html>

It is also possible to add the background color to elements of HTML separately.


For Example:

<style>
.div-1 {
background-color: #EBEBEB;
}
.div-2 {
background-color: #ABBAEA;
}
.div-3 {
background-color: #FBD603;
}
</style>
<body>
<div class="div-1"> First Element </div>
<div class="div-2"> Second Element </div>
<div class="div-3"> Third Element </div>
</body>

Prepared by: Firomsa K.


HTML Frames Implementations, Pros and Cons
HTML frames are used to divide the browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the tables are organized: into
rows and columns. To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines how to divide the window into frames. The rows attribute of <frameset>
tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated
by <frame> tag and it defines which HTML document shall open into the frame. However, this
Tag is deprecated in HTML 5. Example:

<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Disadvantages of Frames
There are few drawbacks with using frames, so it is never recommended to use frames in in
developing webpages. The followings are some of the disadvantages of using frame:

 Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
 Sometimes your page will be displayed differently on different computers due to different
screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

Prepared by: Firomsa K.


 Bookmarks only bookmark the top level pages (the framesets themselves). A user is
unable to bookmark any of the Web pages viewed within a frame.
 Frames can make the production of a website complicated, although current software
addresses this problem.
 It is easy to create badly constructed websites using frames.
 The use of too many frames can put a high workload on the server.
 Older browsers do not support frames.

Advantages of using Frame

The advantages of HTML frames include:

 The main advantage of frames is that it allows the user to view multiple documents
within a single Web page.
 It is possible to load pages from different servers in a single frameset.
 The concern that older browsers do not support frames can be addressed using the
<noframe> tag. This tag provides a section in an HTML document to include alternative
content for browsers without support for frames. However, it requires that the Web
designer provide two formats for one page.

Tables in HTML
Tables are used are used a great deal in the creation of web pages. They are used to create
boundaries that makes positioning easier. Tables are also used to in the formatting of forms in
which the users are going to submit the information.
The <Table ></Table> element has four sub elements:
 Table Row <TR></TR>
 Table Header <TH></TH>
 Table Data<TD></TD> and
 Caption < Caption></ Caption>

Prepared by: Firomsa K.


The Row elements usually contain Table Header elements or Table Data elements. Table Header
and Table Data elements can contain several of the body elements, which allow for rich
formatting of the data in the table. Example:
<TABLE BORDER=”1”>
<TR>
<TH>Column 1 Header</TH>
<TH>Column 2 Header </TH>
</TR>
<TR>
<TD>Row1-Column1</TD>
<TD> Row1-Column2</TD>
</TR>
<TR>
<TD>Row2-Column1</TD>
<TD> Row2-Column2</TD>
</TR>
<TR>
<TD>Row3-Column1</TD>
<TD> Row3-Column2</TD>
</TR>
</TABLE>

Prepared by: Firomsa K.


Table Attributes
 BGColor- used to change the background color of the table. The selected color is
expressed as a hexadecimal red-green-blue value. It is possible to enter this value directly
or by using one of the standard windows color names.
 Width- table width can be specified as an absolute number of pixel or a percentage of the
document width. The width corresponds to the width attribute of the table element. It is
also possible to set the width for table cells as well.
 Border- is the line that forms the boundary of each table cell when the file is displayed
on the browser. We can choose a numerical value for the border width, which specifies
the border in pixels, or BORDER (causing the browser to draw the default border). The
table border corresponds to the border attribute of the table attribute. A setting of
border=”0” will make the border disappear.
 CellSpacing- represents the space between cells and is specified in pixels.
 CellPadding- represents the space between the cell border and cell contents and it is
specified by using pixels.
 Align- tables can have left, right or center alignment. The alignment attribute of the table
is not well supported it is recommended to use <div> or <center> to control the position
of the table in the document.
 Background- used to add background image and colors for the table.
 BorderColor- the color of the border around the table.
Table Caption
Table caption allows to specify a line of text that will appear centered above or below the table.
This caption can act as the title of the table. Caption element has one attribute align that can be
either top (above the table) or bottom (below the table). Example:
<TABLE BORDER=”1” CELLPADDING=”2”>
<CAPTION ALIGH=”BOTTOM”>Label for my table</CAPTION>

Prepared by: Firomsa K.


Table Data and Table Header Attributes

 Cellspan- specifies how many cell columns of the table this cell should span

 RowSpan- specifies how many cell rows of the table this cell should span

 Align- cell data can have left, right or center alignment.

 Valign- cell data can have top, middle or bottom alignment

 Background- to set the background for the cells.

 BGColor- to set the background color for the cells.

 Width- can be specified as an absolute number of pixels or percentage of the


document width.

 Height- can be specified as an absolute number of pixels or percentage of


the document height.

HTML Tips- making the table center can be done by using the method of
centering. First we insert the <center></center> element, then we drag the
table inside the <center></center> element. Different browsers accept this
method of creating the table.

Prepared by: Firomsa K.


Example: creating the table by using ROWSPAN and COLSPAN:

<TABLE BORDER=”1” CELLPADDING=”2”>

<CAPTION ALIGN=”BOTTOM” Label for my Table</CAPTION>

<TR>

<TH>Column 1 Header</TH>

<TH>Column 2 Header</TH>

</TR>

<TR>

<TD COLSPAN=”2”> Row 1- Col 1 </TD>

</TR>

<TR>

<TD ROWSPAN=”2”>Row 2 – Col 1</TD>

<TD>Row 2 – Col 2</TD>

</TR>

<TR>

<TD>Row 3- Col 2</TD>

</TR>

</TABLE>

Prepared by: Firomsa K.


Forms in HTML

An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user
to enter data that is to be sent to the server for processing such as name, email address, password,
phone number, etc. Users generally complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for further processing. form
element is used to create an HTML form for users input. It has the following syntax.

<form action=” ” method=” ”>


form elements
</form>

Input Element- input element is the most commonly used element within HTML forms. It
allows you to specify various types of user input fields, depending on the type attribute. An
input element can be of type text field, password field, checkbox, radio button, submit
button, reset button, and file select box etc.

 Text Fields- are one-line areas that allow the user to input text. Single-line text input
controls are created using an <input> element, whose type attribute has a value of text.
Here's an example of a single-line text input used to take username:

<form>

<label for="username">Username:</label>

<input type="text" name="username" id="username">

</form>

Prepared by: Firomsa K.


 Password Field- Password fields are similar to text fields. The only difference is;
characters in a password field are masked, i.e. they are shown as asterisks or dots. This is
to prevent someone else from reading the password on the screen. This is also a single-
line text input controls created using an <input> element whose type attribute has a
value of password. Here's an example of a single-line password input used to take user
password:

<form>

<label for="user-pwd">Password:</label>

<input type="password" name="user-password" id="user-pwd">

</form>

 Radio Buttons- Radio buttons are used to let the user select exactly one option from a
pre-defined set of options. It is created using an <input> element whose type attribute
has a value of radio. Example: to accept users gender:

<form>

<input type="radio" name="gender" id="male">

<label for="male">Male</label>

<input type="radio" name="gender" id="female">

<label for="female">Female</label>

</form>

Prepared by: Firomsa K.


 Checkboxes- Checkboxes allows the user to select one or more option from a pre-
defined set of options. It is created using an <input> element whose type attribute has a
value of checkbox. Example:

<form>

<input type="checkbox" name="sports" id="soccer">

<label for="soccer">Soccer</label>

<input type="checkbox" name="sports" id="cricket">

<label for="cricket">Cricket</label>

<input type="checkbox" name="sports" id="baseball">

<label for="baseball">Baseball</label>

</form>

 File Select box- The file fields allow a user to browse for a local file and send it as
an attachment with the form data. Web browsers such as Google Chrome and
Firefox render a file select input field with a Browse button that enables the user to
navigate the local hard drive and select a file. This is also created using
an <input> element, whose type attributes value is set to file. Example:

<form>

<label for="file-select">Upload:</label> <input type="file"


name="upload" id="file-select"> </form>

Prepared by: Firomsa K.


 Textarea- textarea is a multiple-line text input control that allows a user to enter
more than one line of text. Multi-line text input controls are created using
an <textarea> element.

<form>

<label for="address">Address:</label>

<textarea rows="3" cols="30" name="address" id="address"></textarea>


</form>

 Select Boxes- A select box is a dropdown list of options that allows user to select one or
more option from a pull-down list of options. Select box is created using
the <select> element and <option> element. The <option> elements within
the <select> element define each list item.

<form>

<label for="city">City:</label>

<select name="city" id="city">

<option value="sydney">Sydney</option>

<option value="melbourne">Melbourne</option>

<option value="cromwell">Cromwell</option>

</select>

</form>

Prepared by: Firomsa K.


 Submit and Reset Buttons- A submit button is used to send the form data to a web
server. When submit button is clicked the form data is sent to the file specified in the
form's action attribute to process the submitted data. A reset button resets all the forms
control to default values.

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

<label for="first-name">First Name:</label>

<input type="text" name="first-name" id="first-name">

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>

Prepared by: Firomsa K.

You might also like