Web Designing Using HTML

*Web Designing using HTML*
World Wide Web is a system of Internet servers that support specially formatted documents, and this is also
a way of accessing information over the medium of the Internet.. The documents are formatted in a markup
language called HTML (Hyper Text Markup Language) that supports links to other documents, as well
as graphics, audio, and video files. But not all Internet servers are part of the World Wide Web. There are
several applications called Web browsers that make it easy to access the World Wide Web.
HTML is a markup language for describing web documents. It also standardized system for tagging text files
to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
Web browser (commonly referred to as a browser) is a software application for retrieving, presenting and
traversing information resources on the World Wide Web. An information resource is identified by a
Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content.
URI/URL refers to the generic term for all types of names and addresses that refer to objects on the World
Wide Web.
Internet is a massive network of networks, a networking infrastructure. It connects millions of computers

together globally, forming a network in which any computer can communicate with any other computer as
long as they are both connected to the Internet.
*GET STARTED WITH HTML CODE!*
 All HTML documents must start with a type declaration: <!DOCTYPE html>.
 The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is between <body> and </body>.
 HTML headings are defined with the <h1> to <h6> tags.
 The <title> ends with </title> tag is required in all HTML documents and it defines the title of the
document.
 The <head> ends with </head> element is a container for all the head elements. It can include a title
for the document, scripts, styles, meta information, and more.
Sample1:
<!DOCTYPE html>
<html>
<head>
<title>HO ME</title>
</head>
<body>
<h1>merry</h1>
<h1>Hello World</h1>
<p>My first paragraph.</p>
<p><h5>This is another paragraph.</h5></p>
</body>
</html>
Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains 4 HTML elements:
Sample 2
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>My first paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Example Explained:

The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).
USING BREAK TAG:

Break tag is use to inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
Sample 3:
<html>
<body>
<p>This is a paragraph with text and it contains<br>a line break.</p>
</body>
</html>
FORMATTING TEXT:
 There are several ways in formatting your text content or font.
 You can use some tag such us bold <b></b> for bolding text, Italic <i></i> for italic text, and
underline<u></u> for underlining text.
Sample 4:
<!DOCTYPE html>
<html>
<body>
<p>
<b>This is BOLD text<b/>
<i>This is Italic text<i/>
<u>THIS is UNDERLINED text</u>
</p>
</body>
</html>
 Font <font></font> tag can also be use in formatting text.
Sample 5:
<!DOCTYPE html>
<html>
<body>
<p><Font face="Calibri" color="brown" size=15>
This paragraph contains texts which are customized…..
</Font>
</p>
</body>
</html>
How to change background color:

You can change the default color background using “bgcolor” in the content or <body> tag.
Sample 6:
<!DOCTYPE html>
<html>
<head>
<title>MyHome</title>
</head>
<body bgcolor="Pink" background="http://images2.alphacoders.com/465/465618.png">

<h1>My Background</h1>
</body>
</html>
Using List tags <li></li>:

 You can easily use list tag for defying txt list, it has bulleted default for identifying text list.
Sample 9:
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1>My list</h1>
<li style="list-style-type:square">Carrots</li>
<li style="list-style-type:disc">Radish</li>
<li style="list-style-type:circle">Squash</li>
<li style="list-style-type:square" align="center">Lemon</li>
<li style="list-style-type:square" align="right">Apple</li>
<li style="list-style-type:square" align="justify">Grapes</li>
</body>
</html>
 NOTE: Style and Align attribute can be applied to lists tags including <ul> and <ol>.
 There are two types of sub list; these are Unordered list and Order list.
Sample 10:
<!DOCTYPE html>
<HTML>
<Head> <Title>Unordered and Order List</Title></Head>
<Body>
<h2>Unordered list</h2>
<ul style="list-style-type:square">
<li>Appetizer</li>
<li>Main Dish</li>
<li>Cocktails</li>
</ul>
<h2>Order list</h2>
<ol >
<li>Appetizer</li>
<li>Main Dish</li>
<li>Cocktails</li>
</ol>
</Body>
</HTML>
How to use <img> tag/element:

 The <img> tag defines an image in an HTML page.
 The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The
<img> tag creates a holding space for the referenced image.
Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
Sample 7:
<!DOCTYPE html>
<HTML>
<head>
<title>IMAGE page</title>
</head>
<body>
<img src="C:\Users\merry\Documents\web\use pics\3rdbday\2nd.jpg" alt="Sample
Image" height="42" width="42">
</body>
</HTML>
 Inside of the quotation of attribute source (src) is the address or URL of the image file.
 And inside of the quotation of the attribute alt refers to the alternate text for an image.
 If you don’t set a width and height it will display the default size of the picture.
 You can also use the style attribute in your image tag.
Example: <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Linking Image:
Sample 11:
<!DOCTYPE html>
<HTML>
<head>
<title>IMAGE page</title>
</head>
<body>
<p>Click the image link to view the larger image.</p>
<a href="C:\Users\merry\Documents\informatics files\HTML\image.htm">
<img src="C:\Users\merry\Documents\web\use pics\3rdbday\2nd.jpg" alt="Icon"

style="width:42px;height:42px;border:3">
</a>
</body>
</HTML>
 The <a href=””> means the address of the link destination.

 Inside of <a href> </a> is the hyper link image which is named “Icon”.
Image Mapping:
Sample 12
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer and the
description:</p>
<img src="C:\Users\merry\Documents\informatics files\planets.jpg" alt="PLANETS"

usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="1,2,133,597" alt="Sun" href="C:\Users\merry\Documents\informatics
files\HTML\sun.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
 The< map>element or tag has attribute name=”” which refers to the name of your map.
 The <area> element or tag has coords attribute, meaning you are setting a coordinates for the
map link.
Other attribute of Image tag:
Attribute Value Description
align top Not supported in HTML5.

bottom Specifies the alignment of an image according to surrounding
middle elements
left
right
border pixels Not supported in HTML5.

Specifies the width of the border around an image
crossorigin anonymous Allow images from third-party sites that allow cross-origin access to
use- be used with canvas
credentials
height pixels Specifies the height of an image
hspace pixels Not supported in HTML5.

Specifies the whitespace on left and right side of an image
ismap ismap Specifies an image as a server-side image-map
longdesc URL Not supported in HTML5.

Specifies the URL to a document that contains a long description of
an image
usemap #mapname Specifies an image as a client-side image-map
vspace pixels Not supported in HTML5.

Specifies the whitespace on top and bottom of an image
width pixels Specifies the width of an image
MAKING TABLES using HTML:

 Tables are defined with the <table> tag.
 Tables are divided into table rows with the <tr> tag.
 Table rows are divided into table data with the <td> tag.
 A table row can also be divided into table headings with the <th> tag.
 Table data <td> are the data containers of the table. They can contain all sorts of HTML
elements like text, images, lists, other tables, etc.
Sample 13:
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
HTML TABLE with borders:

 If you do not specify a border for the table, it will be displayed without borders.
 A border can be added using the border attribute:
Sample14:
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">

<tr bgcolor="Cyan">
<td><b>First Name</b></td>
<td><b>Familly Name</b></td>
<td><b>Weight in Kilos</b></td>
</tr>
<tr>
<td>Joshua</td>
<td>Makatigbas</td>
<td>57</td>
</tr>
<tr>
<td>Leonora</td>
<td>Calma</td>
<td>94</td>
</tr>
<tr>
<td>Armando</td>
<td>Kilaton</td>
<td>80</td>
</tr>
</table>
</body>
</html>
 Attribute bgcolor and can be also apply in html tables.

LINKING HTML PAGE:
 HTML links are hyperlinks.
 A hyperlink is a text or an image you can click on, and jump to another document.
 In HTML, links are defined with the <a> tag. Example syntax: <a href="url">link text</a>.
Sample 13:
<!DOCTYPE html>
<html>
<body>
<p><a href=" C:\Users\merry\Documents\informatics files\HTML\formatting text.htm" >**Project-

1**</a></p>
</body>
</html>
 The href attribute specifies the destination address.
 Then inside the hyperlink tag<a> is the text that you want to be linked.
Using the target attribute:

 The target attribute specifies where to open the linked document.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.facebook.com" target="_blank">GO TO FACEBOOK</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>
</body>
</html
OTHER Values for Target Attribute:
Target Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame

*Different types of HTML tags:
 Basic HTML
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
 Defines a comment
 Forms and Input

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
 Formatting
Tag Description
<acronym> Not supported in HTML5. Use <abbr> instead.

Defines an acronym
<abbr> Defines an abbreviation or an acronym
<address> Defines contact information for the author/owner of a document/article
<b> Defines bold text
<bdi> Isolates a part of text that might be formatted in a different direction from
other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.

Defines big text
<blockquote> Defines a section that is quoted from another source
<center> Not supported in HTML5. Use CSS instead.

Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Represents the defining instance of a term
<em> Defines emphasized text
<font> Not supported in HTML5. Use CSS instead.

Defines font, color, and size for text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian

typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
<strike> Not supported in HTML5. Use <del> or <s> instead.

Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<time> Defines a date/time
<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text
<u> Defines text that should be stylistically different from normal text
<var> Defines a variable
<wbr> Defines a possible line-break

 Frames
Tag Description
<frame> Not supported in HTML5.

Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.

Defines a set of frames
<noframes> Not supported in HTML5.

Defines an alternate content for users that do not support frames
<iframe> Defines an inline frame
 Images
Tag Description
<img> Defines an image
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
 Audio / Video
Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie
 Links
Tag Description
<a> Defines a hyperlink
<link> Defines the relationship between a document and an external resource (most
used to link to style sheets)
<nav> Defines navigation links

 Lists
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.

Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from a popup
menu
 Tables
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting

 Styles and Semantics
Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
 Meta Info
Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.

Specifies a default color, size, and font for all text in a documen

Web Designing Using HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Designing Using HTML

Загружено:

Авторское право:

Доступные форматы

*Web Designing using HTML*

Internet is a massive network of networks, a networking infrastructure. It connects millions of computers

*GET STARTED WITH HTML CODE!*

<p><h5>This is another paragraph.</h5></p>

<p>This is another paragraph.</p>

HTML Example Explained:

USING BREAK TAG:

<p>This is a paragraph with text and it contains<br>a line break.</p>

How to change background color:

<body bgcolor="Pink" background="http://images2.alphacoders.com/465/465618.png">

Using List tags <li></li>:

How to use <img> tag/element:

<a href="C:\Users\merry\Documents\informatics files\HTML\image.htm">

<img src="C:\Users\merry\Documents\web\use pics\3rdbday\2nd.jpg" alt="Icon"

 The <a href=””> means the address of the link destination.

<img src="C:\Users\merry\Documents\informatics files\planets.jpg" alt="PLANETS"

Attribute Value Description

align top Not supported in HTML5.

border pixels Not supported in HTML5.

height pixels Specifies the height of an image

hspace pixels Not supported in HTML5.

ismap ismap Specifies an image as a server-side image-map

longdesc URL Not supported in HTML5.

usemap #mapname Specifies an image as a client-side image-map

vspace pixels Not supported in HTML5.

width pixels Specifies the width of an image

MAKING TABLES using HTML:

HTML TABLE with borders:

<table border="1" style="width:100%">

 Attribute bgcolor and can be also apply in html tables.

<p><a href=" C:\Users\merry\Documents\informatics files\HTML\formatting text.htm" >**Project-

Using the target attribute:

<a href="https://www.facebook.com" target="_blank">GO TO FACEBOOK</a>

OTHER Values for Target Attribute:

Target Value Description

_blank Opens the linked document in a new window or tab

_parent Opens the linked document in the parent frame

framename Opens the linked document in a named frame

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

Defines a comment

 Forms and Input

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

<acronym> Not supported in HTML5. Use <abbr> instead.

<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner of a document/article

Web Designing using HTML

GET STARTED WITH HTML CODE!