Scribd
Upload
6 views

Minor2 mod1

This document provides an introduction to HTML, detailing its structure, elements, and basic syntax for web design. It covers the history of HTML, the importance of various tags, and how to create lists, tables, and include images. Additionally, it explains the role of CSS in styling HTML documents and the significance of metadata in the <head> section.

Uploaded by

Dilsa [X H]
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
6 views

Minor2 mod1

This document provides an introduction to HTML, detailing its structure, elements, and basic syntax for web design. It covers the history of HTML, the importance of various tags, and how to create lists, tables, and include images. Additionally, it explains the role of CSS in styling HTML documents and the significance of metadata in the <head> section.

Uploaded by

Dilsa [X H]
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

CHMMC MINOR 2 WEB DESIGN USING HTML

Module 1
--------------------------------------------------------------------------------------------------------------------------
Introduction to HTML:
HTML is the standard markup language for creating Web pages. HTML

stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages


• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this
is a link", etc.

<!DOCTYPE html>
<html> <head> <title>Page
Title</title> </head> <body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body> </html>

Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

HTML Element
An HTML element is defined by a start tag, some content, and an end tag:

1
CHMMC MINOR 2 WEB DESIGN USING HTML
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Origins and Evolution of HTML:-

The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many

different versions of HTML. The most widely used version throughout the 2000's was HTML 4.01,

which became an official standard in December 1999. Another version, XHTML, was a rewrite of HTML

as an XML language.

A Brief History of HTML:

1993 - Present
The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many
different versions of HTML. The most widely used version throughout the 2000's was HTML
4.01, which became an official standard in December 1999.

Another version, XHTML, was a rewrite of HTML as an XML language. XML is a standard markup
language that is used to create other markup languages. Hundreds of XML languages are in use today,
including GML (Geography Markup Language), MathML, MusicML, and RSS (Really Simple
Syndication). Since each of these languages was written in a common language (XML), their content
can easily be shared across applications. This makes XML potentially very powerful, and it's no surprise
that the W3C would create an XML version of HTML (again, called XHTML). XHTML became an official
standard in 2000, and was updated in 2002. XHTML is very similar to HTML, but has stricter rules.

Most pages on the Web today were built using either HTML 4.01 or XHTML 1.0.

2
CHMMC MINOR 2 WEB DESIGN USING HTML
Basic Syntax of HTML :

The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML

document is between <body> and </body>. Almost all the Tags used in HTML which are used to wrap

text or other data types have , An opening Tag

HTML is a markup language that consists primarily of tags that are enclosed inside angle brackets, for

example, <p>. Most tags are paired to indicate the start and end of the text being marked up; an end

tag is formed by including the tag inside the angle brackets with a forward slash, for example, </p>.

<p> Paragraph Tag </p> The <p> and </p> are the HTML tags and “Paragraph Tag” is the HTML

element, i.e. the on-page text.

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading.

<h6> defines the least important heading. Note: Only use one <h1> per page - this should represent

the main heading/subject for the whole page. Also, do not skip heading levels start with <h1> , then

use <h2> , and so on.

The <br> tag inserts a single line break. The <br> tag is useful for writing addresses or poems.

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is

most often displayed as a horizontal rule that is used to separate content (or define a change) in an

HTML page.

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. The <li> tag is

used to define each list item. Tip: Use CSS to style lists. Tip: For unordered list, use the <ul> tag.

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font,

and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the

HTML source code.

• <h2> Heading Tag </h2>


• <b> Bold Tag </b>
• <i> Italic Tag </i>
3
CHMMC MINOR 2 WEB DESIGN USING HTML
• <u> Underline Tag </u>

Standard HTML Document Structure:

An HTML 4 document is composed of three parts: a line containing HTML version information, a

declarative header section (delimited by the HEAD element), a body, which contains the document's

actual content.

1.
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It contains a <strong>main heading</strong>
and <em> paragraph </em>.
</p>
</body>
</html>

Out put:

<!DOCTYPE html>

The first thing in any HTML document is the preamble. For HTML, all you need is <!DOCTYPE
html>. This may look like an HTML element, but it isn't. It's a special kind of node called "doctype".
The doctype tells the browser to use standards mode. If omitted, browsers will use a different
rendering mode known as quirks mode. Including the doctype helps prevent quirks mode.

<html>

The <html> element is the root element for an HTML document. It is the parent of the <head> and
<body>, containing everything in the HTML document other than the doctype. If omitted it will be
4
CHMMC MINOR 2 WEB DESIGN USING HTML
implied, but it is important to include it, as this is the element on which the language of the content
of the document is declared.

Content language

The lang language attribute added to the <html> tag defines the main language of the document.
The value of the lan g attribut e is a two- or three-letter ISO language code followed by the
region.
The region is optional, but recommended, as a language can vary greatly between regions.

head>

Nested between the opening and closing <html> tags, we find the two children: <head> and

<body>:

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>

The <head>, or document metadata header, contains all the metadata for a site or application. The
body contains the visible content. The rest of this section focuses on the components found nested
inside the opening and closing <head></head>

Document title

Your home page and all additional pages should each have a unique title. The contents for the
document title, the text between the opening and closing <title> tags, are displayed in the
browser tab.

<title>Machine Learning Workshop</title>

Viewport metadata

The other meta tag that should be considered essential is the viewport meta tag, which helps site
responsiveness, enabling content to render well by default, no matter the viewport width. While the

5
CHMMC MINOR 2 WEB DESIGN USING HTML
viewport meta tag has been around since June 2007, when the first iPhone came out, it's only
recently been documented in a specification.

<meta name="viewport" content="width=device-width" />

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
CSS

The <head> is where you include styles for your HTML. If you want to learn about styles, but you do
need to know how to include them in your HTML documents.

There are three ways to include CSS: <link>, <style>, and the style attribute.

The main two ways to include styles in your HTML file are by including an external resource using a
<link> element with the rel attribute set to stylesheet, or including CSS directly in the head
of your document within opening and closing <style> tags.

The <link> tag is the preferred method of including stylesheets. Linking a single or a few external
style sheets is good for both developer experience and site performance.

The syntax is <link rel="stylesheet" href="styles.css"> , where styles.css is the


URL of your stylesheet. You'll often see type="text/css". Not necessary! If you are including
styles written in something other than CSS, the type is needed, but since there isn't any other type,
this attribute isn't needed. The rel attribute defines the relationship: in this case stylesheet. If
you omit this, your CSS will not be linked.

HTML comments:

6
CHMMC MINOR 2 WEB DESIGN USING HTML
Note that the script is wrapped between some angle brackets, dashes, and a bang. This is how you
comment out HTML. We'll leave the script commented out until we have the actual content on the
page. Anything between <!-- and --> will not be visible or parsed.

Basic Text Mark up:

A markup language is a text-encoding system which specifies the structure and formatting of a

document and potentially the relationship between its parts. Markup can control the display of a

document or enrich its content to facilitate automated processing.

Markup can control the display of a document or enrich its content to facilitate automated processing.

The markup can be converted programmatically for display into, for example, HTML, PDF or Rich Text

Format.

A markup language is one that is designed for defining and presenting text. HTML (HyperText Markup

Language), is an example of a markup language. Within a text file such as an HTML file, elements are

marked up using tags which explain the purpose of that part of the content.

Lists : (Ordered and Unordered list)

HTML Lists are used to specify lists of information. All lists may contain one or more list elements.

There are three different types of HTML lists: Ordered List or Numbered List (ol) Unordered List or

Bulleted List (ul)

A list is a record of information that makes finding items easy using bullets. There are 3 types of lists

supported by Bootstrap are: Unordered Lists: In Unordered lists, items are marked with bullets.

Ordered Lists: In Ordered lists items are marked with numerical bullets such as 1,2, i, ii, etc. The <ul>

tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create

unordered lists. Tip: Use CSS to style lists. Tip: For ordered lists, use the <ol> tag.

We can use three types of lists to represent different types of data in HTML:
1. Unordered List <ul>
2. Ordered List <ol>
3. Description List <dl>

7
CHMMC MINOR 2 WEB DESIGN USING HTML
Unordered List

The unordered list is used to represent data in a list for which the order of items does not matter.

In HTML, we use the <ul> tag to create unordered lists. Each item of the list must be a <li> tag
which represents list items. For example,
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>

output:

Ordered List

The ordered list is used to represent data in a list for which the order of items has significance.
The <ol> tag is used to create ordered lists. Similar to unordered lists, each item in the ordered list
must be a <li> tag. For example,
<ol>
<li>Ready</li>
<li>Set</li>
<li>Go</li>
</ol>

output:

Description List

The HTML description list is used to represent data in the name-value form. We use the <dl> tag to
create a definition list and each item of the description list has two elements:

8
CHMMC MINOR 2 WEB DESIGN USING HTML
• term/title - represented by the <dt> tag
• description of the term - represented by the <dd> tag

<dl>
<dt>HTML</dt>
<dd>Hyper-Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading StyleSheets</dd>
<dt>JS</dt>
<dd>Javascript</dd>
</dl>

Tables :

A table in HTML consists of table cells inside rows and columns.

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>

9
CHMMC MINOR 2 WEB DESIGN USING HTML
</tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

<table>

<tr>
<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr> </table>

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:

<table>

<tr>

<th>Person 1</th>

<th>Person 2</th>

<th>Person 3</th>

</tr> <tr>

<td>Emil</

td>

<td>Tobias</td>

<td>Linus</td>

10
CHMMC MINOR 2 WEB DESIGN USING HTML
</tr> <tr>

<td>16</td

>

<td>14</td

>

<td>10</td

> </tr>

</table>

In HTML, the rowspan attribute specifies how many rows a table cell should span, determining its

vertical position. On the other hand, the colspan attribute specifies the number of columns a cell

should span, determining its horizontal position

In HTML tables, Colspan and Rowspan attributes are important for shaping the structure of a table.

Colspan lets a cell stretch across the columns, providing great support for grouping header

columns, and rowspan stretches across the rows, helping to provide vertical organization.

Example:

Images:
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

11
CHMMC MINOR 2 WEB DESIGN USING HTML
The <img> tag has two required attributes:

• src - Specifies the path to the image


• alt - Specifies an alternate text for the image

<img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the path (URL) to the image. prev

<h2>HTML Image Example</h2>


<img src="good_morning.jpg" alt="Good Morning Friends"/> output:

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web
server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot
in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon
and the alt text are shown if the browser cannot find the image. <img src="img_chania.jpg"
alt="Flowers in Chania">

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image. Hypertext

Links:

12
CHMMC MINOR 2 WEB DESIGN USING HTML
A hyperlink can be a piece of text, an image, an icon, or a graphic that, when you click on it, points to

and navigates you to a different webpage or document. It can also point to a specific section or

element within the same webpage or document.

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important

attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers: An unvisited link is underlined and blue.
There are four types of hyperlinks. Text hyperlink – Uses a word or phrase to take visitors to another

page, file or document. Image hyperlink – Uses an image to take visitors to another page, file or

document. Bookmark hyperlink – Uses text or an image to take visitors to another part of a web page

An HREF attribute is found within an anchor tag (a) in HTML. For example, if you want to link to

example.com, you would write it in HTML as <a href="http://www.example.com"> Example.

This code creates a hyperlink that users can click to go to the specified web address.

HTML links are hyperlinks.

You can click on a link and jump to another document.


When you move the mouse over a link, the mouse arrow will turn into a little hand.
The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link's

destination.

The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must
specify another target for the link.
The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

13
CHMMC MINOR 2 WEB DESIGN USING HTML
• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

Use target="_blank" to open the linked document in a new browser window or tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>


Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form> form

elements

</form>

The <form> element is a container for different types of input elements, such as: text fields,

checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Type Description <input type="text"> Displays a single-line text input field


<input type="radio"> Displays a radio button (for selecting one of many choices)
Displays a checkbox (for selecting zero or more of many
<input type="checkbox"> choices)
<input
type="s
ubmit">
D
isplays a

14
CHMMC MINOR 2 WEB DESIGN USING HTML
submit
button
(for
submitti
ng the
form)
<input
type="b
utton">
D
isplays a
clickabl
e
button

Text Fields

The <input type="text"> defines a single-line input field for text input. A

form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
This is how the HTML code above will be displayed in a browser:

First name:

Last name:

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud
the label when the user focuses on the input element.

15
CHMMC MINOR 2 WEB DESIGN USING HTML
The <label> element also helps users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.

Radio Buttons

The <input type="radio"> defines a radio button. Radio

buttons let a user select ONE of a limited number of choices.

<form>
<input type="radio" id="html" name="fav_language" value="HTML"> <label
for="html">HTML</label><br> <input type="radio" id="css" name="fav_language"
value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript"
name="fav_language" value="JavaScript"> <label
for="javascript">JavaScript</label> </form>
Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

The Submit Button


The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
16
CHMMC MINOR 2 WEB DESIGN USING HTML
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Frames:-

HTML <frame> Tag. HTML Frames are used to divide the web browser window into

multiple sections where each section can be loaded separately. A frameset tag is the

collection of frames in the browser window. Creating Frames: Instead of using body tag,

use frameset tag in HTML to use frames in web browser.

Not Supported in HTML5.


The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>.

TML Frames are used to divide the web browser window into multiple sections where each section
can be loaded separately. A frameset tag is the collection of frames in the browser window.

17
CHMMC MINOR 2 WEB DESIGN USING HTML
Creating Frames: Instead of using body tag, use frameset tag in HTML to use frames in web browser.
But this Tag is deprecated in HTML 5. The frameset tag is used to define how to divide the browser.
Each frame is indicated by frame tag and it basically defines which HTML document shall open into
the frame. To define the horizontal frames use row attribute of frame tag in HTML document and to
define the vertical frames use col attribute of frame tag in HTML document.

<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src ="C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src ="C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />
<noframes> <body>The browser you are working does not support
frames.</body> </noframes>
</frameset>
</html>
output:

18
CHMMC MINOR 2 WEB DESIGN USING HTML

Example 2:
<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>
<frameset cols = "30%, 40%, 30%">
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src ="C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src ="C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does not support frames.</body>
</noframes>
</frameset>
</html>

19
CHMMC MINOR 2 WEB DESIGN USING HTML

output:
Attributes of Frameset tag:
• cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically
used to define the no of columns and its size inside the frameset tag.
The size or width of the column is set in the frameset in the following ways:
Example:
<frameset cols = "300, 400, 300">
<frameset cols = "30%, 40%, 30%">
<frameset cols = "30%, *, 30%">
<frameset rows = "300, 400, 300">
<frameset rows = "30%, 40%, 30%">
<frameset rows = "30%, *, 30%">

-----------------------------------------------------------------------------------------------------------------------

20

You might also like