Scribd
Upload
7 views18 pages

Task 8 HTML

Uploaded by

naniadabala102
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
7 views18 pages

Task 8 HTML

Uploaded by

naniadabala102
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/ 18

Task 8: Basic HTML tags, Introduction to HTML5 and its tags, preparation of a simple

homepage

HTML Introduction :
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.
HTML is a markup language used by the browser to manipulate text, images, and other
content, in order to display it in the required format. HTML was created by Tim Berners-Lee in
1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML
2.0, published in 1999.
Elements and Tags: HTML uses predefined tags and elements which tell the browser how to
properly display the content. Remember to include closing tags. If omitted, the browser applies
the effect of the opening tag until the end of the page.
HTML page structure: The basic structure of an HTML page is laid out below. It contains the
essential building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.
Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
 HTML can only create static webpages. For dynamic webpages, other languages have
to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.
Tags contains Elements, attribute and value:

<FONT COLOR=“Blue”>This is blue font</FONT>


Elements Attributes Value

<FONT COLOR=“Blue” SIZE=“+1”>This is blue and bigger than normal font</FONT>

• Tags may be nested

How to create a Html Web Page:

• Open a text editor like Notepad or Wordpad

• Create your HTML document

• Head - not displayed with body

• Body

• Save the HTML (extension of .htm or .html)

• Display your HTML document in Web browser (File -> Open or double click on File)

• Check your work and modify as necessary

• Place it on the Web…Then Finish the web Hosting.

HTML TAGS AND THEIR ATTRIBUTES With Examples

Text Formatting Tags:

• <b> : To apply Bold on the text


• <i> : To apply italic on the text.
• <u> : To apply the underline on the text.
• <center> : Display the text center.
• <strike> : Text will be strike
• <tt> : Displays teletype text. Usually rendered in monospace font.
• <big> : Displays the text larger than usual.
• <small> :Displays the text smaller than usual.
• <sub> : Displays the text as subscript
• <sup> : Displays the text as superscript
• <Address> : To display the address information.
• <code> : program code.
• <em> : Emphasized text
• <samp> : Sample output.
• <strong> : Strongly emphasized text
• <Abbr> : Abbreviated text
<acronym> : Acronym text

• Use as document header in HTML body.


• Starting and closing tags for header:
<h1>……</h1>
• There are six levels of headings, from Heading 1 through Heading 6.
• Various types of header:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
EXAMPLE:
<html>
<head>
<title>Web Authoring</title>
</head>
<body>
HTML is easy!!
<h1>This line using h1</h1>
<h2>This line using h2</h2>
<h3>This line using h3</h3>
<h4>This line using h4</h4>
<h5>This line using h5</h5>
<h6>This line using h6</h6>
</body>
</html>

• <br> tag is a break tag. Used to break up the current line and cursor goes to next line.
• <hr> tag is used to display the horizontal line. Attributes of <hr> tag is
– Align = left/right/center
– Width – horizontal width of the line
– Size – vertical size of the line
– Noshade – displayed in two-dimensional
• Used to sets the font properties to the text on the webpage.
• Attributes:
– Face : sets the font type like Arial,tahoma.
– Size : Sets the size of the text. possible values are 1 through 7.
– Color : Sets the color of the text.
– Example :
<font face=“Arial” size=7 color=“red”> This is font tag </font>
• Formats the text into a paragraph and adds space before the paragraph.
• Attributes:
– Align : sets the alignment of the text in the paragraph. Possible values are LEFT,
RIGHT,CENTER,JUSTIFY
• Displays scrolling text in a marquee style.
• Attributes
– Align: Sets the alignment of the text relative to marquee box. Possible values
are TOP(default),MIDDLE,BOTTOM.
– Behavior : Sets how the text in the marquee should move. Can be
SCROLL,SLIDE,ALTERNATE.
– Bgcolor : Sets the background color for the marquee box.
– Direction : Sets the direction of the text should scroll.
Can be LEFT(default),RIGHT,DOWN,UP.
• Tells the browser that the enclosed text is preformatted and display it as it is on the
browser.
<pre>
preformatted text
</pre>
• Used for putting the text in terms of blocks so we can apply the styles to individual
blocks.
• Attributes
– Align : Sets the horizontal alignment of the element in the page. Possible values are
LEFT(default),RIGHT,CENTER,JUSTIFY.

Working with Images : <img> Tag

• Inserts an image into a webpage.


• Attributes
– Src : should be required. Specifies the path of the actual image to display.
– Align : Sets the alignment of the image relative to text. Can be LEFT, RIGHT,TOP,
BOTTOM, MIDDLE.
– Alt : Displays the text to be displayed in place of an image for browsers that
can’t handle the images.
– Border : Sets the border size of the image . Set to 0 for no border or a positive
integer pixel value.
– Height : Specifies the height of the image. if we specify , can speed up the
downloading of the image.
– Width : Specifies the width of the image. if we specify , can speed up the
downloading of the image.
– Hspace : Sets the horizontal spacing (both right & left sides) around the image.
– Vspace : Sets the vertical spacing (both top & bottom sides) around the image.

Working with Hyperlinks : <A> Anchor Tag

– Refer to other sources such as HTML documents and images. Both text and images can
act as hyperlinks.
– Attributes :
• Href : Holds the target URL of the hyperlink. Either this attribute or NAME
attribute must be used.
• Name : Specifies an anchor name, the name we want to use is as the target of a
hyperlink.
• Accesskey : Assigns a keyboard shortcut to the hyperlink. Set to a single
alphanumeric value.
• Tabindex : Sets the tab sequence of hyperlinks in the page (pressing the tab key
moves from one to the next hyperlink).
• Title: Holds the text that will be displayed in tool tips when the mouse moves
over the hyperlink.

• To link to another page on same web


– <a href=“PAGENAME.html”>
• To link to another web
– <a href=http://www.WEBNAME.com>
• To link to another page in other web
– <a href=http://www.WEBNAME.com/pagename.html>
• Specifying a page’s full address – Absolute URL.
– http://www.jntu.ac.in/btech/results.html
– http://www.jntu.ac.in/mca/results.html
– http://www.jntu.ac.in/3rdbtech/syllabus.html
• Specifying a page’s URL relative to current page displaying on the web browser –
Relative URL.
– results.html
– btech/results.html
– btech/3rdyear/results.html
– ../results.html
• ../mca/results.htmlIn the <body> tag link,alink and vlink attributes specify the colors
for the hyperlink text depending upon the visiting status.
– Link : <body link=“blue”> - color of the hyperlink that have not yet been visited.
– Alink : <body alink=“black”> - color of the hyperlinks as they are being clicked
– Vlink : <body vlink=“red”> - color of the hyperlink that have been visited.
• Sets the base URL for the hyperlinks in a page. Can only be used in <head> tag.
• Relative hyperlinks are defined relative to current page, unless we specify a different
base to use for hyperlinks with <base> element.
• Attributes:
–Href : Holds the URL we want to use as the base URL of hyperlinks in the page.
Eg:
<head>
<base href=http://jntu.ac.in/imgs>
</head>
<body>
< a href=http://jntu.ac.in/results.html>
<img src=“clickme.gif”>
</a>
<a href=“syllabus.html>Syllabus</a>
</body>
• The name attribute is used to create a named anchor. When using named anchors we
can create links that can jump directly into a specific section on a page, instead of
letting the user scroll around to find what he/she is looking for.
Syntax :-
<a name="label">Text to be displayed</a>
We can refer to that anchor as #label in <a> tag href attribute.
Syntax :-
<a href=“#label">Text to be displayed</a>
• In Internet Explorer we can use <a> element’s accesskey attribute to assign a shortcut
key to hyperlinks to make it accessible from keyboard.
• To activate access key, the user presses Alt + specified access key at the same time.
• Ex
<a href="http://www.microsoft.com/ie" accesskey="i"> Internet Explorer</a>
<br>
<a href="http://www.netscape.com" accesskey="n"> Netscape Navigator
</a>
• We can use an email hyperlink to let users do email, it opens their email program and
creates an empty message addressed to receiver.
• We create an email hyperlink by using the hyperlink protocol “mailto” followed by
receiver email address.
• Ex:
< a href=mailto:principal@gmail.com> contact Us
</a>

List Tags:

Lists may be used for a piece of information and for providing a straightforward index
to the site.
• HTML provides three types of lists.
– Unordered Lists - <ul>
– Ordered Lists - <ol>
Definition Lists - <dl>
• The ordered and unordered lists are each made up of sets of list items. Elements of a list
may be formatted with <li> tag.
<li>Win98</li>
<li>Win XP</li>
<li>Windows Millennium</li>
<li>Windows Vista </li>
<li> Windows 7 </li>
 <ul> tag is used to create an unordered list. This list has a bullet in front of each list item.
Every list item in <ul> tag must be encapsulated within
 <li>..</li> tag.
 Attributes
 Type : Specifies the type of list item. For unordered list sets to DISC(solid bullet),
SQUARE(solid square),CIRCLE(hollow bullet).
 Compact : stand alone attribute specifying that compact rendering be used.
eg : <ul compact>
• <ol> tag is used to Create an ordered list. This list has a sequence of numbers in front of
each list item. Every list item in <ol> tag must be encapsulated within <li>..</li> tag.
• Attributes
– Type : Specifies the type of list item. For ordered list sets to A, a, I, i ,1.
– Compact : stand alone attribute specifying that compact rendering be used.
eg : <ol compact>
<b>This is an Ordered List:</b> <br>

<OL>

<LI> Item number one.

<LI> Item number two.

<LI> Item number three.

</OL>

<b>This is an Unordered List:</b> <br>

<UL>

<LI> First item.

<LI> Second item.

<LI> Third Item.


</UL>
• The definition list is a special kind of list for providing terms followed by a description for
them.
• Definition lists are contained inside the <dl> element. The <dl> element then contains
alternating <dt> and <dd> elements.
• The content of the <dt> element is the term we will be defining.
• The <dd> element contains the definition of the previous <dt> element
• h3> Here is a definition List </h3> <br>
• <dl>
• <dt>Unordered List</dt>
• <dd>A list of bullet points.</dd>
• <dt>Ordered List</dt>
• <dd>An ordered list of points, such as a numbered set of steps.</dd>
• <dt>Definition List</dt>
• <dd>A list of terms and definitions.</dd>
• </dl>

Working with Tables : (Table Tags)


• The TABLE tag defines a table for multi-dimensional data arranged in rows and columns.
• Tables are commonly used to display all manner of data, such as timetables, financial
reports, and sports results.
• In order to work with tables, we need to start thinking in grid of rectangles. Each rectangle
is known as a cell.
• A row is made up of a set of cells on the same line from left to right, while a column is
made up of a line of cells going from top to bottom.
• Inside the <table> element, the table is written out row by row. A row is contained inside a
<tr> element — which stands for table row. And each cell is then written inside the row
element using a <td> element — which stands for table data.
<table border=”1”>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

• BORDER : To display a table with borders, we will have to use the border attribute.
• CELLSPACING : This attribute allows control over the space used between cells in a table.
The value should be a pixel value.
• CELLPADDING : This attribute allows control over the space inserted between the cell data
and cell wall in a table.The value should be a pixel value.
• WIDTH : This attribute is used to describe the desired width of this table, either as an
absolute width in pixels, or a percentage of document width.
• HEIGHT : This attribute describes the height of the table, either as a particular pixel value,
or as a percentage of the display window.
• ALIGN : It allows a table to be aligned to the left or right of the page, allowing text to flow
around the table.
• BGCOLOR : It allows the background color of the table to be specified, using either the
specified color names, or a rrggbb hex triplet.
• BORDERCOLOR : This attribute used to set the border color of the table.
• Creates a row in a table. Contains multiple <TD> or
<TH> elements.
• Attributes
– Align : Specifies the horizontal alignment of the text in this table row. Set to LEFT,
CENTER,RIGHT.
– Bgcolor : Sets the background color of the table cells.
– Bordercolor : Sets the external border color for the row.
– Valign :Sets the vertical alignment of the data in this row.
Sets to TOP, MIDDLE, BOTTOM.
• Creates a table headings; just like table data but usually bold and centered vertically and
horizontally.
• Attributes
– Align : Specifies the horizontal alignment of the text in this table row. Set to LEFT,
CENTER, RIGHT.
– Bgcolor : Sets the background color of the table cells.
– Bordercolor : Sets the external border color for the row.
– Valign :Sets the vertical alignment of the data in this row. Sets to
TOP,MIDDLE,BOTTOM.
– Width : Specifies the width of the cell. Set to either pixel value or percentage of the
display area.
– Height : Specifies the height of the cell. Set to either pixel value or percentage of the
display area.
– Colspan : Indicates how many cell columns of the table this cell should span. Set to
a positive integer.
– Rowspan : Indicates how many rows of the table this cell should span. Set to a
positive integer.
– Nowrap : Specifies that data in the cell should not be wrapped by the browser ,
meaning the table cell will be made long enough to fit the contents without line
breaks.
• Specifies the data for a table cell. Used inside the <TABLE> tag.
• Attributes
– Align
-- VAlign

HTML <menu> Tag :


The <menu> element defines a list (or menu) of commands that a user can perform.

<menu>, <menuitem>, <li>, <hr> and <script>

Syntax
The basic syntax of the <menu> tag is given with:
HTML / XHTML: <menu> ... </menu>
The following table shows the attributes that are specific to the <menu> tag.

Attribute Value Description


label text Specifies a visible label of the menu.
type popup Specifies which type of menu to display.
toolbar
context
Example:

<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">


<menu type="context" id="skymenu">
<menuitem label="Zoom In" icon="zoom-in.png" onclick="zoomin()">
<menuitem label="Zoom Out" icon="zoom-out.png" onclick="zoomout()">
<menuitem label="Reload Image" icon="reload.png" onclick="window.location.reload();">
</menu>

Aim: Develop your home page using HTML Consisting of your photo, name, address and
education details as a table and your skill set as a list.

HTML CODE:
<html>
<head>
<title> Home Page</title>
</head>
<center>
<body>
<body style="background-color:ORANGE;">
<img src="photo.jpg" height=100 width=100>
<h1> NAME : NAME</h1>
<h1><pre>
Address:Dr No,
Village,
Mandal,State,
PINCODE-xxxxx.
</pre></h1>
<h1> Educational Details</h1>
<table border=1>
<tr>
<th>Course </th>
<th>Name of the Institutation</th>
<th>Year of Pass</th>
<th>Percentage</th>
</tr>
<tr>
<td>B.TEch(IT) </td>
<td>College Name</td>
<td>Pursuing</td>
<td>Percentage</td>
</tr>
<<tr>
<<td>Intermediate </td>
<td>College Name</td>
<td>Year</td>
<td>Percentage</td>
</tr>
<td>SSC</td>
<td>SChool Nmae</td>
<td>Year</td>
<td>Percentage</td>
</tr>
</table>
<h1>Technical Skills:</h1>
<ultype=disc>
<li>Programming Languages : C, JAVA</li>
<li>Operating Systems : Windows </li>
<li>Database Systems : Oracle</li>
<li>Web Technologies</li>
</ul>
</body>
</center>
</html>

Output Web Page:

You might also like