1) HTML

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as

<head>

<title>

<body>

<header> <footer>

<article> <section>

<p> <div> and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way.

simple example of HTML:

<html>

<head>

<title> This is a title </title>

</head>

<body>

<p> Hello Worls !!! </p>

</body>

</html>

..........................................................................................................................................................................................................................

2) Headers

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> - <h6>)
logo or icon
authorship information

You can have several <header> elements in one document.

Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

EXAMPLE:

A header for an <article>:

<h1>Most important heading here</h1>

<h3>Less important heading here</h3>

<p>some additional information here</p>

</header>

<p>information...........</p>

</article>

The <header> tag also supports the Global Attributes in HTML.
The <header> tag also supports the Event Attributes in HTML.

Most browsers will display the <header> element with the following default values:

header

{
display: block;}

3) body:

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Syntax

In HTML, the syntax for the <body> tag is:

<body>

</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <bpdy> tag:

Attribute	Description	HTML Compatibility
alink	Color of text for selected hyperlinks	Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
background	Image to be used a background	Depreciated in HTML 4.01, Obsolete in HTM L5, use CSS
bgcolor	Background color	Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
link	Color of text for unvisited hyperlinks	Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
onafterprint	Function to call user has printed document	HTML5
onbeforeprint	Function to call when user requests document to be printed	HTML5
onbeforeunload	Funtion to call when document is to be unloaded	HTML5
onblur	Function to call when document has lost focus	HTML5
onerror	Function to call when document fails	HTML5
onfocus	Function to call when document has focus	HTML5
onhaschange	Function to call when fragment identifier portion of document's address has changed	HTML5
onload	Function to call when document has loaded	HTML5
onmessage	Function to call when the document received a message	HTML5
onoffline	Function to call when Network communication fails	HTML5
ononline	Function to call when Network communication is restored	HTML5
onpopstate	Function to call when user navigated session history	HTML5
onredo	Function to call when user moved forward in undo history	HTML5
onresize	Function to call when document was resized	HTML5
onstorage	Function to call when storage area changed	HTML5
onundo	Function to call when user moved backward in undo history	HTML5
onunload	Function to call when document is being unloaded	HTML5
text	Foreground color of text	Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
vlink	Color of text for visited hyperlinks	Depreciated in HTML 4.01, Obsolete in HTML5, use CSS

Example

A simple HTML document:

<html>

<head>

<title> Title of the document </title>

</head>

<body>

The content of the document

</body>

</html>

4) html tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

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.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

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

Syntax:

<tag>

content

</tag>

a) Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

b) HTML Meta Tags

DOCTYPE, title, link, meta and style

c) HTML Text Tags

d) HTML Link Tags

e) HTML Image and Object Tags

f) HTML List Tags

g) HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

h) HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

5) Table Text

In HTML, table text is the text that is located within an HTML table. Often you will want your table text to appear different to the other text on the page. This page contains table text codes for applying styles to the text within your HTML tables.

To style the text within a table, you use the same CSS properties that you would use in styling any text. The thing to remember is that, you need to know which HTML element to apply the style against. For example, to change the text color across the whole table, use the color property against the <table> tag. But to change the text color in only the table header, you should only apply that property to the <thead> element, or alternatively, to each individual <th> tag (or the <<tr> tag that contains the table headers).

Below are some examples of applying styles against table text in HTML.

his example applies various styles against the text in the whole table. Therefore, I apply the styles against the <table> tag.

<tr>

<th>Table Header</th><th>Table Header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

<tr>

<td>Table cell 3</td><td>Table cell 4</td>

</tr>

</table>

6) graphics

Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate, or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces.

Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural or engineering blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.

Graphic designers have many tools and technologies at their disposal for everything from print to Web development, and W3C provides many of the underlying formats that can be used for the creation of content on the open Web platform.

Graphics Used

Graphics are used for everything from enhancing the appearance of Web pages to serving as the presentation and user interaction layer for full-fledged Web Applications.

Different use cases for graphics demand different solutions, thus there are several different technologies available. Photographs are best represented with PNG, while interactive line art, data visualization, and even user interfaces need the power of SVG and the Canvas API. CSS exists to enhance other formats like HTML or SVG. WebCGM meets the needs for technical illustration and documentation in many industries.

Examples

As a simple example of an SVG image file, here is a circle with a gradient to give it a 3D appearance:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100">

     
  <defs>

     <radialGradient id="rg" cx="100" cy="100" fx="80" fy="80" gradientUnits="userSpaceOnUse">


       <stop offset="5%" stop-color="lightskyblue" />


       <stop offset="100%" stop-color="darkblue" />


     </radialGradient>

  </defs>


  <circle id="circle_1" cx="100" cy="100" r="95" fill="url(#rg)"/>
  
</svg>



............................................................................................................................................................................................................





7) sounds


          The <sound> element was
used in the Mosaic browser to add sound files to HTML documents. It was never
formally adopted in an HTML standard and has no support among modern browsers.
Instead, use the modern HTML5 element <audio>.









Some time ago it was quite complicated to insert music  

or  sounds on a web page. Now, that problem is solved, 

adding sounds being quite simple.




HTML




<embed height="60" type="audio/midi"




width="144" src="audio.mp3" volume="60" 




loop="false" autostart="false" />







It is recommended that both height and width to be 




directly proportional to avoid problems.




To hide the player the value of the hidden attribute 




(which is false at the moment) will be replaced by true. 




This thing is done if you are absolutely sure that the user 




does not wish to stop the sound.


................................................................................................................................................................................................

Advance Programming Techniques

Unit 1

Pageviews

Creating Internet WWW pages

Syntax

Attributes

Example

Syntax:

a) Unclosed HTML Tags

b) HTML Meta Tags

c) HTML Text Tags

d) HTML Link Tags

e) HTML Image and Object Tags

f) HTML List Tags

g) HTML Table Tags

h) HTML Form Tags

5) Table Text

Examples

7) sounds

................................................................................................................................................................................................