Scribd
Upload
9 views20 pages

3.2.1Web Technologies(Topic_06 HTML Advance)

The document covers advanced HTML topics, including the importance of DOCTYPE declarations, creating website layouts using tables and divs, and the introduction of HTML5 structural elements. It also explains the purpose of the <head> element, various metadata tags, and the use of client-side scripting with JavaScript. Additionally, it provides examples and templates for creating HTML documents and layouts.

Uploaded by

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

3.2.1Web Technologies(Topic_06 HTML Advance)

The document covers advanced HTML topics, including the importance of DOCTYPE declarations, creating website layouts using tables and divs, and the introduction of HTML5 structural elements. It also explains the purpose of the <head> element, various metadata tags, and the use of client-side scripting with JavaScript. Additionally, it provides examples and templates for creating HTML documents and layouts.

Uploaded by

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

Course Title : Web Technologies

Course Code : DI 322


BS.IT 5TH Semester
Made by: Miss Areej Ali

Topic 6: HTML ADVANCE

Prepared By:Miss AREEJ ALI


HTML ADVANCE (1)

HTML Doctypes

Understanding the HTML5 Doctype

A Document Type Declaration, or DOCTYPE for short, is an instruction to the web browser
about the version of markup language in which a web page is written.

A DOCTYPE declaration appears at the top of a web page before all other elements. According
to the HTML specification or standards, every HTML document requires a valid document type
declaration to insure that your web pages are displayed the way they are intended to be
displayed.

The doctype declaration is usually the very first thing defined in an HTML document (even
before the opening <html> tag); however the doctype declaration itself is not an HTML tag.

The DOCTYPE for HTML5 is very short, concise, and case-insensitive.

<!DOCTYPE html>

Doctypes for earlier versions of HTML were longer because the HTML language was
SGML-based and therefore required a reference to a DTD, but they are obsolete now.

With HTML5 this is no longer the case and the doctype declaration is only needed to enable the
standard mode for documents written using the HTML syntax.

You can use the following markup as a template to create a new HTML5 document.

Example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title><!-- Insert


your title here --></title> </head> <body> <!-- Insert your content here --> </body>
</html>

Note: The doctype declaration refers to a Document Type Definition (DTD). It is an instruction
to the web browser about what version of the markup language the page is written in. The World
Wide Web Consortium (W3C) provides DTDs for all HTML versions.

Tip: Must add a doctype declaration when creating an HTML document. Also, use the W3C's
Validator to check your HTML for markup or syntax error before publishing online.

Prepared By: Miss Areej Ali


HTML ADVANCE (2)

HTML Layout

HTML Layout

Creating Website Layouts


Creating a website layout is the activity of positioning the various elements that make a web
page in a well-structured manner and give appealing look to the website.

You have seen most websites on the internet usually display their content in multiple rows and
columns, formatted like a magazine or newspaper to provide the users a better reading and
writing environment. This can be easily achieved by using the HTML tags, such as <table>,
<div>, <header>, <footer>, <section>, etc. and adding some CSS styles to them.

HTML Table Based Layout


Table provides the simplest way for creating layouts in HTML. Generally, this involves the
process of putting the contents such as text, images, and so on into rows and columns.

The following layout is created using an HTML table with 3 rows and 2 columns — the first and
last row spans both columns using the table's colspan attribute:

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>HTML Table Layout</title>

</head>

<body style="margin:0px;">

<table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;"> <tr>


<td colspan="2" style="padding:10px 20px; background-color:#acb3b9;"> <h1
style="font-size:24px;">Tutorial Republic</h1> </td> </tr> <tr style="height:170px;">
<td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align: top;">

Prepared By: Miss Areej Ali


HTML ADVANCE (3)
<ul style="list-style:none; padding:0px; line-height:24px;"> <li><a href="#"
style="color:#333;">Home</a></li> <li><a href="#"
style="color:#333;">About</a></li> <li><a href="#"
style="color:#333;">Contact</a></li> </ul> </td> <td style="padding:20px;
background-color:#f2f2f2; vertical-align:top;"> <h2>Welcome to our site</h2> <p>Here
you will learn how to create websites...</p> </td> </tr> <tr> <td colspan="2"
style="padding:5px; background-color:#acb3b9; text-align:center;"> <p>copyright
&copy; tutorialrepublic.com</p> </td> </tr>

</table>

</body>

</html>

OUTPUT:

HTML Div Based Layout

Using the <div> elements is the most common method of creating layouts in
HTML. The <div> (stands for division) element is used for marking out a block of
content, or set of other elements inside an HTML document. It can contain further
other div elements if required.

Prepared By: Miss Areej Ali


HTML ADVANCE (4)
The following example uses the div elements to create a multiple column
layout. It will produce the same result as in the previous example that uses
table element:

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="utf-8">

<title>HTML Div Layout</title>

<style> body { font: 14px Arial,sans-serif; margin: 0px; }

.header { padding: 10px 20px; background: #acb3b9; }

.header h1 { font-size: 24px; }

.container { width: 100%; background: #f2f2f2; }

.nav, .section { float: left; padding: 20px; min-height: 170px; box-sizing: border-box; }

.nav { width: 20%; background: #d4d7dc; }

.section { width: 80%; }

.nav ul { list-style: none; line-height: 24px; padding: 0px; }

.nav ul li a { color: #333; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.footer { background: #acb3b9; text-align: center; padding: 5px; }

</style> </head> <body>

<div class="container"> <div class="header">

<h1>Tutorial Republic</h1>

</div> <div class="wrapper clearfix"> <div class="nav"> <ul> <li><a


href="#">Home</a></li> <li><a href="#">About</a></li> <li><a
href="#">Contact</a></li> </ul> </div> <div class="section"> <h2>Welcome to our
site</h2> <p>Here you will learn how to create websites...</p> </div> </div> <div

Prepared By: Miss Areej Ali


HTML ADVANCE (5)
class="footer"> <p>copyright &copy; tutorialrepublic.com</p> </div> </div> </body>
</html>

OUTPUT:

Using the HTML5 Structural Elements

HTML5 has introduced the new structural elements such as <header>, <footer>, <nav>,
<section>, etc. to define the different parts of a web page in a more semantic way.

You can consider these elements as a replacement for commonly used classes such as .header,
.footer, .nav, .section, etc. The following example uses the new HTML5 structural elements to
create the same layout that we have created in the previous examples.

<!DOCTYPE html>

<html lang="en">

<head> <meta charset="utf-8">

<title>HTML5 Web Page Layout</title>

Prepared By: Miss Areej Ali


HTML ADVANCE (6)
<style>

body { font: 14px Arial,sans-serif; margin: 0px; }

header { padding: 10px 20px; background: #acb3b9; }

header h1 { font-size: 24px; }

.container { width: 100%; background: #f2f2f2; }

nav, section { float: left; padding: 20px; min-height: 170px; box-sizing: border-box; }
section { width: 80%; } nav { width: 20%; background: #d4d7dc; }

nav ul { list-style: none; line-height: 24px; padding: 0px; }

nav ul li a { color: #333; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

footer { background: #acb3b9; text-align: center; padding: 5px; }

</style>

</head>

<body> <div class="container">

<header> <h1>Tutorial Republic</h1> </header>

<div class="wrapper clearfix"> <nav> <ul> <li><a href="#">Home</a></li> <li><a


href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section>
<h2>Welcome to our site</h2> <p>Here you will learn how to create websites...</p>

Prepared By: Miss Areej Ali


(7)
HTML ADVANCE

</section> </div> <footer> <p>copyright &copy; tutorialrepublic.com</p> </footer>


</div>

</body>

</html>

OUTPUT:

The following table provides a brief overview of new HTML5 structural


elements.

Tag Description

<header> Represents the header of a document or a section.

<footer> Represents the footer of a document or a section.

<nav> Represents a section of navigation links.

Prepared By: Miss Areej Ali


HTML ADVANCE (8)

<section> Represents a section of a document, such as header, footer etc.

<article> Represents an article, blog post, or other self-contained unit of


information.

<aside> Represents some content loosely related to the page content.

HTML Head

● The HTML head Element

The <head> element primarily is the container for all the head elements, which provide extra
information about the document (metadata), or reference to other resources that are required for
the document to display or behave correctly in a web browser.

The head elements collectively describes the properties of the document such as title, provide
meta information like character set, instruct the browser where to find the style sheets or scripts
that allows you to extend the HTML document in a highly active and interactive ways.

The HTML elements that can be used inside the <head> element are: <title>, <base>,
<link>, <style>, <meta>, <script> and the <noscript> element.

● The HTML title Element

The <title> element defines the title of the document.

The title element is required in all HTML/XHTML documents to produce a valid document.
Only one title element is permitted in a document and it must be placed within the <head>
element. The title element contains plain text and entities; it may not contain other markup tags.

Prepared By: Miss Areej Ali


HTML ADVANCE(9)
The title of the document may be used for different purposes. For example:

● To display a title in the browser title bar and in the task bar.
● To provide a title for the page when it is added to favorites or bookmarked.
● To displays a title for the page in search-engine results.

The following example demonstrates how to place title in an HTML document.

Example:

<!DOCTYPE html>

<html lang="en">

<head> <title>A simple HTML document</title>

</head> <body> <p>Hello World!</p>

</body>

</html>

● The HTML base Element

The HTML <base> element is used to define a base URL for all relative links contained in the
document, e.g. you can set the base URL once at the top of your page, and then all subsequent
relative links will use that URL as a starting point. Here's an example:

<!DOCTYPE html> <html lang="en">

<head> <title>Defining a base URL</title> <base


href="https://www.tutorialrepublic.com/"> </head> <body> <p>

<a href="html-tutorial/html-head.php">HTML Head</a>.

Prepared By: Miss Areej Ali


HTML ADVANCE (10)
</p> </body> </html>

The hyperlink in the example above will actually resolve to


https://www.tutorialrepublic.com/html-tutorial/html-head.php regardless of the URL of the
current page. This is because the relative URL specified in the link: html-tutorial/html-head.php
is added to the end of the base URL: https://www.tutorialrepublic.com/.

● The HTML link Element


The <link> element defines the relationship between the current document and an external
documents or resources. A common use of link element is to link to external style sheets.

<head> <title>Linking Style Sheets</title> <link rel="stylesheet" href="style.css">


</head>

● The HTML style Element


The <style> element is used to define embedded style information for an HTML document. The
style rules inside the <style> element specify how HTML elements render in a browser.

<head> <title>Embedding Style Sheets</title> <style> body { background-color:


YellowGreen; } h1 { color: red; } p { color: green; } </style> </head>

● The HTML meta Element


The <meta> element provides metadata about the HTML document. Metadata is a set of data
that describes and gives information about other data. Here's an example:

<head> <title>Specifying Metadata</title> <meta charset="utf-8"> <meta name="author"


content="John Smith"> </head>

● The HTML script Element


The <script> element is used to define client-side script, such as JavaScript in HTML
documents.

The following example will display a greeting message in the browser:

<head> <title>Adding JavaScript</title>

<script> document.write("<h1>Hello World!</h1>") </script>

</head>

Prepared By: Miss Areej Ali


HTML ADVANCE (11)

HTML Meta
● Defining Metadata
The <meta> tags are typically used to provide structured metadata such as a document's
keywords, description, author name, character encoding, and other metadata. Any number of
meta tags can be placed inside the head section of an HTML or XHTML document.

Metadata will not be displayed on the web page, but will be machine parsable, and can be used
by the browsers, search engines like Google or other web services.

The following section describes the use of meta tags for various purposes.

● Declaring Character Encoding in HTML


Meta tag typically used to declare character encoding inside HTML document.

<!DOCTYPE html> <html lang="en"> <head> <title>Declaring Character


Encoding</title> <meta charset="utf-8"> </head> <body> <h1>Hello World!</h1>
</body> </html>

To set the character encoding inside a CSS document, the @charset at-rule is used.

Note: UTF-8 is a very versatile and recommended character encoding to choose. However, if
this is not specified, then the default encoding of the platform is used

● Defining the Author of a Document


You can also use the meta tag to clearly define who is the author or creator of the web page.

The author can be an individual, the company as a whole or a third party.

<head> <title>Defining Document's Author</title> <meta name="author"


content="Alexander Howick"> </head>

Note: The name attribute of the meta tag defines the name of a piece of document-level
metadata, while the content attribute gives the corresponding value. The content attribute value
may contain text and entities, but it may not contain HTML tags.

Prepared By: Miss Areej Ali


HTML ADVANCE (12)
● Keywords and Description for Search Engines
Some search engines use metadata especially keywords and descriptions to index web pages;
however this may not necessarily be true. Keywords giving extra weight to a document's
keywords and description provide a short synopsis of the page. Here's an example:

<head>

<title>Defining Keywords and Description</title>

<meta name="keywords" content="HTML, CSS, javaScript">

<meta name="description" content="Easy to understand tutorials and references on


HTML, CSS, javaScript and more...">

</head>

HTML Script

● Working with Client-side Script

Client-side scripting refers to the type of computer programs that are executed by the user's web
browser. JavaScript (JS) is the most popular client-side scripting language on the web.

The <script> element is used to embed or reference JavaScript within an HTML document to add
interactivity to web pages and provide a significantly better user experience.

Some of the most common uses of JavaScript are form validation, generating alert messages,
creating image gallery, show hide content, DOM manipulation, and many more.

● Adding JavaScript to HTML Pages

JavaScript can either be embedded directly inside the HTML page or placed in an external script
file and referenced inside the HTML page. Both methods use the <script> element.

● Embedding JavaScript

To embed JavaScript in an HTML file, just add the code as the content of a <script> element.

The JavaScript in the following example write a string of text to a web page.

Prepared By: Miss Areej Ali


HTML ADVANCE (13)
<!DOCTYPE html> <html lang="en">

<head>

<meta charset="utf-8">

<title>Embedding JavaScript</title>

</head>

<body> <div id="greet"></div>

<script> document.getElementById("greet").innerHTML = "Hello World!"; </script>

</body>

</html>

Tip: Ideally, script elements should be placed at the bottom of the page, before the closing body
tag i.e. </body>, because when browser encounters a script it pauses rendering the rest of the
page until it parses the script that may significantly impact your site performance.

● Calling External JavaScript File

You can also place your JavaScript code into a separate file (with a .js extension), and call that
file in your HTML document through the src attribute of the <script> tag.

This is useful if you want the same script available to multiple documents. It saves you from
repeating the same task over and over again and makes your website much easier to maintain.

The following example demonstrates how to link external JS file in HTML.

Prepared By: Miss Areej Ali


HTML ADVANCE (14)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Linking
External JavaScript</title> </head> <body> <div id="greet"></div> <script
src="hello.js"></script> </body> </html>

Note: When the src attribute is specified, the <script> element must be empty. This simply
means that you cannot use the same <script> element to both embed the JavaScript and to link to
an external JavaScript file in an HTML document.

Tip: JavaScript files are normal text files with .js extension, such as "hello.js". Also, the external
JavaScript file contains only JavaScript statements; it does not contain the <script>...</script>
element like embedded JavaScript.

The HTML noscript Element

The <noscript> element is used to provide an alternate content for users that have either disabled
JavaScript in their browser or have a browser that doesn't support client-side scripting.

This element can contain any HTML elements, aside from <script>, that can be included in the
<body> element of a normal HTML page. Let's check out an example:

<!DOCTYPE html>

<html lang="en"> <head>

<meta charset="utf-8"> <title>Noscript Demo</title>

</head>

<body>

<div id="greet"></div> <script> document.getElementById("greet").innerHTML =


"Hello World!"; </script>

<noscript>

Prepared By: Miss Areej Ali


HTML ADVANCE (15)
<p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript> </body>
</html>

Note: The content inside the noscript element will only be displayed if the user's browser doesn't
support scripting, or scripting is disabled in the browser.

HTML Entities
● What is HTML Entity?
Some characters are reserved in HTML, e.g. you cannot use the less than (<) or greater than (>)
signs or angle brackets within your text, because the browser could mistake them for markup,
while some characters are not present on the keyboard like copyright symbol ©.

To display these special characters, they must be replaced with the character entities. Character
entity references, or entities for short, enable you to use the characters that cannot be expressed
in the document's character encoding or that cannot be entered by a keyboard.

● Frequently Used HTML Character Entities

Result Description Entity Name Numerical reference

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" quotation mark &quot; &#34;

' apostrophe &apos; &#39;

Prepared By: Miss Areej Ali


HTML ADVANCE (16)

¢ cent &cent; &#162;

£ pound &pound; &#163;

¥ yen &yen; &#165;

€ euro &euro; &#8364;

© copyright &copy; &#169;

® registered trademark &reg; &#174;

™ trademark &trade; &#8482;

You can use numeric character references, instead of entity names. A key benefit of using
numeric character references is that, they have stronger browser support, and can be used to
specify any Unicode character, whereas entities are limited to a subset of this.

Note: HTML entities names are case-sensitive! Please check out the HTML character entities
reference for a complete list of character entities of special characters and symbols.

Tip: Nonbreaking space (&nbsp;) is used to create a blank space between two items that cannot
be separated by a line break. They are also used to display multiple spaces since web browsers
display only one space if multiple spaces are created using the spacebar key.

HTML URL
● What is URL?
URL stands for Uniform Resource Locator is the global address of documents and other
resources on the World Wide Web. Its main purpose is to identify the location of a document and
other resources available on the internet, and specify the mechanism for accessing it through a
web browser.

Prepared By: Miss Areej Ali


HTML ADVANCE (17)
For instance, if you look at the address bar of your browser you will see:

https://www.tutorialrepublic.com/html-tutorial/html-url.php

— This is the URL of the web page you are viewing right now.

● The URL Syntax


The general syntax of URLs is the following:

scheme://host:port/path?query-string#fragment-id

A URL has a linear structure and normally consists of some of the following:

● Scheme name — The scheme identifies the protocol to be used to access the resource on
the Internet. The scheme names followed by the three characters :// (a colon and two
slashes). The most commonly used protocols are http://, https://, ftp://, and mailto://.
● Host name — The host name identifies the host where resource is located. A hostname is
a domain name assigned to a host computer. This is usually a combination of the host's
local name with its parent domain's name. For example, www.tutorialrepublic.com
consists of host's machine name www and the domain name tutorialrepublic.com.
● Port Number — Servers often deliver more than one type of service, so you must also
tell the server what service is being requested. These requests are made by port number.
Well-known port numbers for a service are normally omitted from the URL. For example,
web service HTTP runs by default over port 80, HTTPS runs by default over port 443.
● Path — The path identifies the specific resource within the host that the user wants to
access. For example, /html/html-url.php, /news/technology/, etc.
● Query String — The query string contains data to be passed to server-side scripts,
running on the web server. For example, parameters for a search. The query string
preceded by a question mark (?), is usually a string of name and value pairs separated by
ampersand (&), for example, ?first_name=John&last_name=Corner, q=mobile+phone,
and so on.
● Fragment identifier — The fragment identifier, if present, specifies a location within the
page. Browser may scroll to display that part of the page. The fragment identifier
introduced by a hash character (#) is the optional last part of a URL for a document.

Note: Scheme and host components of a URL are not case-sensitive, but path and query string
are case-sensitive. Usually the whole URL is specified in lower case.

Prepared By: Miss Areej Ali


HTML ADVANCE (18)

HTML Validation

● Why Validate Your HTML Code


As a beginner it is very common that you will make mistake in writing your HTML code.
Incorrect or non-standard code may cause unexpected results in how your page displayed or
function in browsers.

To prevent this you can test or validate your HTML code against the formal guidelines and
standards set by the Wide Web Consortium (W3C) for HTML/XHTML web pages.

The World Wide Web Consortium provide a simple online tool (https://validator.w3.org/) that
automatically check your HTML code and point out any problems/errors your code might have,
such as missing closing tags or missing quotes around attributes.

● Validating a Web Page


Validating a web page is a process of ensuring that it conforms to the norms or standards defined
by the World Wide Web Consortium (W3C) which is the authority to maintain HTML standards.

There are several specific reasons for validating a web page, some of them are:

● It helps to create web pages that are cross-browser, cross-platform compatible. It also
likely to be compatible with the future version of web browsers and web standards.
● Standards compliant web pages increase the search engine spiders and crawlers visibility,
as a result your web pages will more likely be appear in search results.
● It will reduce unexpected errors and make your web pages more accessible to the visitor.

Note: Validation is important. It will ensure that your web pages are interpreted in the same way
(the way you want it) by the various web browsers, search engines etc.

Prepared By: Miss Areej Ali


HTML ADVANCE (19)

HTML URL Encoding


According to RFC 3986, the characters in a URL only limited to a defined set of reserved and
unreserved US-ASCII characters. Any other characters are not allowed in a URL. But URL often
contains characters outside the US-ASCII character set, so they must be converted to a valid
US-ASCII format for worldwide interoperability. URL-encoding, also known as
percent-encoding is a process of encoding URL information so that it can be safely transmitted
over the internet.

To map the wide range of characters that is used worldwide, a two-step process is used:

● At first the data is encoded according to the UTF-8 character encoding.


● Then only those bytes that do not correspond to characters in the unreserved set should be
percent-encoded like %HH, where HH is the hexadecimal value of the byte.

For example, the string: François would be encoded as: Fran%C3%A7ois

Ç, ç (c-cedilla) is a Latin script letter.

Prepared By: Miss Areej Ali

You might also like