Search for notes by fellow students, in your own course and all over the country.

Browse our notes for titles which look like what you need, you can preview any of the notes via a sample of the contents. After you're happy these are the notes you're after simply pop them into your shopping cart.

My Basket

Buy These Notes

You have nothing in your shopping cart yet.

Title: HTML full course
Description: "Learn HTML with our comprehensive course book designed for beginners and aspiring web developers. This book serves as your ultimate guide to mastering the fundamentals of HTML and building modern web pages. With clear explanations and hands-on examples, this course book takes you through the essentials of HTML coding. You'll start with the basics, including tags, attributes, and document structure, and gradually progress to more advanced topics like forms, tables, multimedia, and semantic markup. Key Features: 1. Structured Learning: The book follows a well-organized structure, presenting concepts in a logical and progressive manner, allowing for easy comprehension and retention of knowledge. 2. Practical Examples: Each chapter includes practical examples and exercises that reinforce your understanding and provide real-world scenarios for applying HTML concepts. 3. Interactive Code Snippets: Get hands-on experience with HTML coding using interactive code snippets provided throughout the book. You can experiment with code directly within the book and see the results instantly. 4. Modern Web Standards: Stay up-to-date with the latest HTML standards and best practices. The book covers HTML5 elements and techniques, ensuring you learn the most current and relevant skills. 5. Responsive Web Design: Discover how to create responsive and mobile-friendly web pages using HTML and CSS. Learn about responsive design principles and techniques to ensure your websites look great on any device. Whether you're a student, professional, or hobbyist, this HTML course book equips you with the necessary skills to build stunning web pages from scratch. Unlock the potential of HTML and embark on your journey to becoming a proficient web developer.
Buy These NotesPreview

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above

1
...

•

Hypertext refers to the way in which Web pages (HTML documents) are linked
together
...


•

As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display
...

Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language
...




Either you can use Try it option available at the top right corner of the code box to check the
result of this HTML code, or let's save it in an HTML file test
...
Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox
etc
...
2

HTML

HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the
content
...
Except few tags, most
of the tags have their corresponding closing tags
...

Above example of HTML document uses the following tags:
Tag

Description

...




This tag encloses the complete HTML document and mainly comprises
of document header which is represented by
...
tags
...


<br /><br />The <title> tag is used inside the <head> tag to mention the document<br />title<br> ...<br> 3<br /><br /> <body><br /><br />This tag represents the document's body which keeps other HTML tags<br />like <h1>, <div>, <p> etc<br> ...<br> <br /><br /><p><br /><br />This tag represents a paragraph<br> ...<br> Learning HTML is simple as users have to learn the usage of<br />different tags in order to format the text or images to make a beautiful webpage<br> ...<br> <br /><br />HTML Document Structure<br />A typical HTML document will have the following structure:<br />Document declaration tag<br /><html><br /><head><br />Document header related tags<br /></head><br /><br /><body><br />Document body related tags<br /></body><br /></html><br />We will study all the header and body tags in subsequent chapters, but for now let's see what<br />is document declaration tag<br> ...<br> 4<br /><br /> 2<br> ...<br> Current version of HTML is 5 and it makes use of the following<br />declaration:<br /><!DOCTYPE html><br />There are many other declaration types which can be used in HTML document depending on<br />what version of HTML is being used<br> ...<br> > tag along with other HTML tags<br> ...<br> You can use different sizes for your headings<br> ...<br> While displaying any heading, browser adds one line before and one line after that<br />heading<br> ...<br> 5<br /><br /> Paragraph Tag<br />The <p> tag offers a way to structure your text into different paragraphs<br> ...<br> </p><br /><p>Here is a second paragraph of text<br> ...<br> </p><br /></body><br /></html><br />This will produce the following result:<br />Here is a first paragraph of text<br> ...<br> <br /><br />pg<br> ...<br> <br /><br />pg<br> ...<br> This<br />tag is an example of an empty element, where you do not need opening and closing tags, as<br />there is nothing to go in between them<br> ...<br> If you omit this<br />space, older browsers will have trouble rendering the line break, while if you miss the forward<br />slash character and just use <br> it is not valid in XHTML<br> ...<br> <br /><br />Thanks<br /><br />Mahnaz</p><br /></body><br /></html><br />This will produce the following result:<br />Hello<br />You delivered your assignment on time<br> ...<br> <br /><br />pg<br> ...<br> </p><br /><center><br /><p>This text is in the center<br> ...<br> <br />This text is in the center<br> ...<br> The <hr> tag creates a<br />line from the current position in the document to the right margin and breaks the line<br />accordingly<br> ...<br> 9<br /><br /> HTML<br /><br /><body><br /><p>This is paragraph one and should be on top</p><br /><hr /><br /><p>This is paragraph two and should be at bottom</p><br /></body><br /></html><br />This will produce the following result:<br /><br />This is paragraph one and should be on top<br />This is paragraph two and should be at bottom<br /><br />Again <hr /> tag is an example of the empty element, where you do not need opening and<br />closing tags, as there is nothing to go in between them<br> ...<br> If you omit<br />this space, older browsers will have trouble rendering the horizontal line, while if you miss the<br />forward slash character and just use <hr> it is not valid in XHTML<br /><br />Preserve Formatting<br />Sometimes, you want your text to follow the exact format of how it is written in the HTML<br />document<br> ...<br> <br />Any text between the opening <pre> tag and the closing </pre> tag will preserve the<br />formatting of the source document<br> ...<br> 10<br /><br /> HTML<br /><br />Example<br /><!DOCTYPE html><br /><html><br /><head><br /><title>Preserve Formatting Example


function testFunction( strText ){
alert (strText)
}



This will produce the following result:
function testFunction( strText ){
alert (strText)
}

Try using the same code without keeping it inside 


...

" Here, you would not want a browser to
split the "12, Angry" and "Men" across two lines:
An example of this technique appears in the movie "12 Angry Men

...

 For example, when coding the "12 Angry Men"
in a paragraph, you should use something similar to the following code:

Example


pg

...

"




pg

...

 HTML– ELEMENTS

An HTML element is defined by a starting tag

...







This is heading content

...






So here


...
is another HTML element
...
/>,

and

elements
...

HTML documents consists of a tree of these elements and they specify how HTML documents
should be built, and what kind of content should be placed in what part of an HTML document
...
Element
An HTML element is defined by a starting tag
...

For example,

is starting tag of a paragraph and

is closing tag of the same
paragraph but

This is paragraph

is a paragraph element
...
13

Example


25


Nested Elements Example


This is italic heading


This is underlined paragraph




This will display the following result:

This is italic heading

This is underlined paragraph

pg
...
HTML– ATTRIBUTES

HTML

We have seen few HTML tags and their usage like heading tags

,

, paragraph tag

and other tags
...

An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag
...
For example, the paragraph

element
in the example carries an attribute whose name is align, which you can use to indicate
the alignment of paragraph on the page
...
The below example shows three possible values of align attribute: left,
center and right
...
However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation
...
15

Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all)
are:
•
•
•
•

Id
Title
Class
Style

The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page
...


•

If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name
...
For now, let's use the id attribute to distinguish
between two paragraph elements as shown below
...
They syntax for the title attribute
is similar as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading
...
16

HTML
The title Attribute Example


Titled Heading Tag Example




This will produce the following result:

Titled Heading Tag Example
Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever
title you used in your code is coming out as a tooltip of the cursor
...
You will learn more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS)
...

The value of the attribute may also be a space-separated list of class names
...




The style Attribute


Some text
...
17

HTML
Some text
...
Here, you need to understand what are HTML attributes and how they can be
used while formatting content
...

dir
lang

•
•

xml:lang

The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the text
should flow
...




pg
...

When dir attribute is used within the tag, it determines how text will be presented
within the entire document
...


The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of HTML
...

The values of the lang attribute are ISO-639 standard two-character language codes
...


Example



English Language Page


This page is using English Language



The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute
...


Generic Attributes
Here's a table of some other attributes that are readily usable with many of the HTML tags
...
19

HTML

Attribute

Options

Function

align

right, left, center

Horizontally aligns tags

valign

top, middle, bottom

Vertically aligns tags within an HTML
element
...


class

User Defined

Classifies an element for use with Cascading
Style Sheets
...


height

Numeric Value

Specifies the height of tables, images, or
table cells
...


We will see related examples as we will proceed to study other HTML tags
...


pg
...
HTML– FORMATTING

HTML

If you use a word processor, you must be familiar with the ability to make text bold, italicized,
or underlined; these are just three of the ten options available to indicate how text can appear
in HTML and XHTML
...
element, is displayed in bold as shown below:

Example



Bold Text Example


The following word uses a bold typeface
...


Italic Text
Anything that appears within
...
21

HTML


33

The following word uses a italicized typeface
...


Underlined Text
Anything that appears within
...




This will produce the following result:

The following word uses an underlined typeface
...
element is displayed with strikethrough,
which is a thin line through the text as shown below:

pg
...





This will produce the following result:
The following word uses a strikethrough typeface
...
element is written in monospaced font
...
In a monospaced font, however, each letter has the
same width
...




This will produce the following result:

pg
...


Superscript Text
The content of a
...


Example



Superscript Text Example


The following word uses a superscript typeface
...


Subscript Text
The content of a
...


Example



Subscript Text Example


pg
...




This will produce the following result:
The following word uses a

subscript

typeface
...
element is displayed as inserted text
...
element, is displayed as deleted text
...
25

HTML

Example



Deleted Text Example


I want to drink cola wine




This will produce the following result:

Larger Text
The content of the
...




This will produce the following result:
The following word uses a big typeface
...
26

HTML

Smaller Text
The content of the
...



38

This will produce the following result:
The following word uses a small typeface
...

For example, you might want to put all of the footnotes on a page within a
element to
indicate that all of the elements within that
element relate to the footnotes
...


Example



Div Tag Example


pg
...
htm">HOME |
ABOUT



Content Articles

Actual content goes here
...
28

HOME | CONTACT | ABOUT CONTENT

ARTICLES
Actual content goes here
...
So, if
you have a part of a sentence or paragraph which you want to group together, you could use
the element as follows

Example



Span Tag Example


This is the example of span tag and the style="color:red">div tag alongwith CSS




This will produce the following result:
This is the example of span tag and the div tag along with CSS
These tags are commonly used with CSS to allow you to attach a style to a section of a page
...
This chapter will take you through all the important phrase tags, so let's start seeing
them one by one
...
element is displayed as emphasized text
...
29

6
...




This will produce the following result:
The following word uses an emphasized typeface
...
element, is displayed as marked with
yellow ink
...


pg
...
element is displayed as important text
...




This will produce the following result:
The following word uses a strong typeface
...
If
present, the title attribute must contain this full description and nothing else
...
31

HTML

Text Abbreviation


My best friend's name is

Abhy
...


Acronym Element
The element allows you to indicate that the text between and
 tags is an acronym
...


Example



Acronym Example


This chapter covers marking up text in XHTML
...


Text Direction

pg
...
element stands for Bi-Directional Override and it is used to override
the current text direction
...


This text will go right to left
...
This
text will go right to left
...
element (or HTML Definition Element) allows you to specify that you
are introducing a special term
...

Typically, you would use the element the first time you introduce a key term
...


Example



Special Terms Example


The following word is a special term
...
33

HTML



This will produce the following result:
The following word is a special term
...
tags
...


Example



Blockquote Example


The following description of XHTML is taken from the W3C Web site:


XHTML 1
...
01, HTML 4
...
2 and HTML 2
...



This will produce the following result:
The following description of XHTML is taken from the W3C Web site:
XHTML 1
...
01, HTML 4
...
2 and HTML 2
...


Short Quotations

pg
...
element is used when you want to add a double quote within a sentence
...




This will produce the following result:
Amit is in Spain, I think I am wrong
...


Example



Citations Example


This HTML tutorial is derived from W3 Standard for HTML
...
35

HTML
This will produce the following result:

This HTML tutorial is derived from W3 Standard for HTML
...
tags
...


Example



Computer Code Example


Regular text
...
Regular text
...
This is code
...


Keyboard Text
When you are talking about computers, if you want to tell a reader to enter some text, you
can use the
...


Example



Keyboard Text Example

pg
...
This is inside kbd element Regular text
...
This is inside kbd element Regular text
...


Example



Variable Text Example


document
...
write("user-name")

Program Output
The
...

Again, it is mainly used when documenting programming or coding concepts
...
37

HTML

Example



Program Output Example


Result produced by the program is Hello World!




This will produce the following result:
Result produced by the program is Hello World!

Address Text
The

...


Example



Address Example


388A, Road No 22, Jubilee Hills

This will produce the following result:

388A, Road No 22, Jubilee Hills - Hyderabad

pg
...
39

7
...
The META elements can be used to include name/value pairs describing
properties of the HTML document, such as author, expiry date, a list of keywords, document
author etc
...
This tag is an empty element
and so does not have a closing tag but it carries information within its attributes
...


Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing tags inside the header of the
document which is represented by and tags
...
Can be anything
...


content

Specifies the property's value
...


httpequiv

Used for http response message headers
...
Values include content-type,
expires, refresh and set-cookie
...
40

HTML

You can use tag to specify important keywords related to the document and later
these keywords are used by the search engines while indexing your webpage for searching
purpose
...




Meta Tags Example



Hello HTML5!




This will produce the following result:
Hello HTML5!

Document Description
You can use tag to give a short description about the document
...


Example



Meta Tags Example








Hello HTML5!



pg
...

You can use tag to store cookies on client side and later this information can be used
by the Web Server to track a site visitor
...
If you
want to redirect page immediately then do not specify content attribute
...
" />


pg
...
tutorialspoint
...
45

Title: HTML full course
Description: "Learn HTML with our comprehensive course book designed for beginners and aspiring web developers. This book serves as your ultimate guide to mastering the fundamentals of HTML and building modern web pages. With clear explanations and hands-on examples, this course book takes you through the essentials of HTML coding. You'll start with the basics, including tags, attributes, and document structure, and gradually progress to more advanced topics like forms, tables, multimedia, and semantic markup. Key Features: 1. Structured Learning: The book follows a well-organized structure, presenting concepts in a logical and progressive manner, allowing for easy comprehension and retention of knowledge. 2. Practical Examples: Each chapter includes practical examples and exercises that reinforce your understanding and provide real-world scenarios for applying HTML concepts. 3. Interactive Code Snippets: Get hands-on experience with HTML coding using interactive code snippets provided throughout the book. You can experiment with code directly within the book and see the results instantly. 4. Modern Web Standards: Stay up-to-date with the latest HTML standards and best practices. The book covers HTML5 elements and techniques, ensuring you learn the most current and relevant skills. 5. Responsive Web Design: Discover how to create responsive and mobile-friendly web pages using HTML and CSS. Learn about responsive design principles and techniques to ensure your websites look great on any device. Whether you're a student, professional, or hobbyist, this HTML course book equips you with the necessary skills to build stunning web pages from scratch. Unlock the potential of HTML and embark on your journey to becoming a proficient web developer.
Buy These NotesPreview