Unit 1
Web design :
Web design refers to the design of websites that are displayed on the internet. It usually refers
to the user experience aspects of website development rather than software development.
What is HTML:
• 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.
WEB PAG:
Static Web pages:
Static Web pages are very simple. It is written in languages such as HTML, JavaScript, CSS,
etc. For static web pages when a server receives a request for a web page, then the server sends
the response to the client without doing any additional process. And these web pages are seen
through a web browser. In static web pages, Pages will remain the same until someone changes
it manually.
.
Dynamic Web Pages:
Dynamic Web Pages are written in languages such as CGI, AJAX, ASP, ASP.NET, etc. In
dynamic web pages, the Content of pages is different for different visitors. It takes more time
to load than the static web page. Dynamic web pages are used where the information is
changed frequently, for example, stock prices, weather information, etc.
HTML Editors
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit
(Mac).
We believe that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences >
Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML code
instead of formatted text".
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).
View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and
choose "Open with").
The result will look much like this:
HTML Tag
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag:\
An HTML element is a component of an HTML document that tells a web browser how to
structure and interpret a part of the HTML document. HTML elements can contain
formatting instructions, semantic meaning, and content.
<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
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<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
Some HTML elements have no content (like the <br> element). These elements are called empty
elements. Empty elements do not have an end tag!
ATTRIBUTES:
HTML Attribute
Attributes provide additional information about elements. Attributes are always specified in the
start tag. Attributes usually come in name/value pairs like: name="value"
Vertically aligns tags within an HTML element. Names an element for use with Cascading Style
Sheets. Classifies an element for use with Cascading Style Sheets. Specifies the width of tables,
images, or table cells.
The table below lists all HTML attributes and what elements they can be used within:
Attribute Belongs to Description
Specifies the types of files
accept <input> that the server accepts (only
for type="file")
Specifies the character
accept-charset <form> encodings that are to be used
for the form submission
Specifies a shortcut key to
accesskey Global Attributes
activate/focus an element
Specifies where to send the
action <form> form-data when a form is
submitted
Specifies the alignment
align Not supported in HTML 5. according to surrounding
elements. Use CSS instead
Specifies an alternate text
alt <area>, <img>, <input> when the original element
fails to display
Specifies that the script is
async <script> executed asynchronously
(only for external scripts)
Specifies whether the
<form> or the <input>
autocomplete <form>, <input>
element should have
autocomplete enabled
Specifies that the element
autofocus <button>, <input>, <select>, <textarea> should automatically get
focus when the page loads
Specifies that the audio/video
autoplay <audio>, <video> will start playing as soon as it
is ready
Specifies the background
bgcolor Not supported in HTML 5. color of an element. Use CSS
instead
Specifies the width of the
border Not supported in HTML 5. border of an element. Use
CSS instead
Specifies the character
charset <meta>, <script>
encoding
Specifies that an <input>
element should be pre-
checked <input> selected when the page loads
(for type="checkbox" or
type="radio")
Specifies a URL which
cite <blockquote>, <del>, <ins>, <q> explains the
quote/deleted/inserted text
Specifies one or more
classnames for an element
class Global Attributes
(refers to a class in a style
sheet)
Specifies the text color of an
color Not supported in HTML 5.
element. Use CSS instead
Specifies the visible width of
cols <textarea>
a text area
Specifies the number of
colspan <td>, <th> columns a table cell should
span
Gives the value associated
content <meta> with the http-equiv or name
attribute
Specifies whether the content
contenteditable Global Attributes of an element is editable or
not
Specifies that audio/video
controls should be displayed
controls <audio>, <video>
(such as a play/pause button
etc)
Specifies the coordinates of
coords <area>
the area
TAG OF HTML:
An HTML tag is a piece of markup language used to indicate the beginning and end of an
HTML element in an HTML document. As part of an HTML element, HTML tags help web
browsers convert HTML documents into web pages.
Definition and Usage
The <area> tag defines an area inside an image map (an image map is an image with clickable
areas).
<area> elements are always nested inside a <map> tag.
Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and
creates a relationship between the image and the map.
• <html> … </html> — The root element. ...
• <head> … </head> — The document head. ...
• <title> … </title> — The page title. ...
• <body> … </body> — The page's content. ...
• <h1> … </h1> — A section heading. ...
• <p> … </p> — A paragraph. ...
• <a> … </a> — A link. ...
• <img> — An image.
HTML PAGE STRUCTURE:
An HTML 5 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.
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Basic Examples
HTML Documents
All HTML documents must start with a document 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>
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Phrase Tag: In HTML, phrase tag is used to indicate the structural meaning of a block of text.
For example, abbr tag indicates that the phrase contained the abbreviation word. Some
examples of phrase tags are abbr, strong, mark, . . . etc.
Emphasized Text: The em tag is used to emphasized the text and this tag displays the italic
font in a browser. It simply means anything written within em tag is shown as emphasized
Text.
Syntax:
<em> Text Content </em>
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<!-- em tag is used in below paragraph-->
<p><em>GeeksforGeeks</em> emphasized tag</p>
</body>
</html>
Output:
HR TAG:
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.
BR TAG:
he <br> tag inserts a single line break. The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">How to View HTML
Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in
Edge), or similar in other browsers. This will open a window containing the HTML source code
of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see
what elements are made up of (you will see both the HTML and the CSS). You can also edit the
HTML or CSS on-the-fly in the Elements or Styles panel that opens.
pre formatted tag in html:
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width
font, and the text preserves b
Both spaces and line breaks. The text will be displayed exactly as written in the HTML source
code.
Phrase Element
phrase element is used to describe words or phrases within a block or structure element.
Phrases include semantic elements used inline to mark items like user interface controls,
keywords, index terms, and cross references.
</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a
special term. It's usage is similar to italic words in the midst of a paragraph. Typically, you
would use the <dfn> element the first time you introduce a key
term.
List Tag:
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
