Scribd
Upload
75 views

WebTechnology Unit II Notes

The document provides detailed information about HTML including what HTML is, HTML elements and tags, document structure, text formatting, links, images, lists, tables, forms, and CSS. Key topics covered include the anatomy of HTML elements, common tags like headings, paragraphs, links, and images, and using CSS to style HTML pages.

Uploaded by

sivani14565220
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
75 views

WebTechnology Unit II Notes

The document provides detailed information about HTML including what HTML is, HTML elements and tags, document structure, text formatting, links, images, lists, tables, forms, and CSS. Key topics covered include the anatomy of HTML elements, common tags like headings, paragraphs, links, and images, and using CSS to style HTML pages.

Uploaded by

sivani14565220
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

What is HTML?

● HTML stands for Hyper Text Markup Language


● HTML is the most basic building block of the Web. It defines the meaning and structure of
web content.
● It is interpreted by web browsers
● It is standardized by World Wide Web Consortium (W3C)
● Tim Berners-Lee was the primary author of HTML
● Latest version of HTML is 5.2
● It is based on predefined codes called tags
● It is case insensitive
● HTML files are also called as HTML documents
● HTML files are saved with .htm or .html extension

Anatomy of an HTML Element

An HTML element defines the contents to be displayed on the web page along with instructions to
the browser, how to render those contents on the web page.

Such instructions are special predefined codes called Tags.

What is Tag?

● A tag is a special code enclosed in < and > symbols having predefined purpose e.g.

<img> tag is used to show the images on a web page

<video> tag is used to show the videos on a web page

<br> tag is used for line break

● It specifies formatting and layout instructions for your web page.

What are different types of tags?

● The tags can be of two types

○ Paired tags

○ Singular or Empty tags

● The tags which have opening and closing parts are called as paired tags e.g.

○ <b></b> is used to make the enclosed text as bold

○ <i></i> is used to make the enclosed text as italic


○ <u></u> is used to make the enclosed text as underline

● The tags which have only opening part but no closing part are called as singular tags e.g.

○ <img> tag

○ <br> tag

Structure of HTML Page

What is <!doctype html>?

● It defines the version number of HTML going to be used in current web page

● It helps the web browser to understand the structure of the web page defined in a file called
Document Type Definition (DTD)

<!doctype html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">

Tags under <head> section

● The head section contains some sub tags which do not show the content on the web page
e.g.

<title></title> tag

<script></script> tag

<style></style> tag

<meta> tag

<bgsound> tag
<link> tag

<base> tag

Tags under <body> section

● The body section contains some sub tags which display some contents on the web page e.g.

<p></p> tag

<h1></h1> tag

<a></a> tag

<b></b> tag

<i></i> tag

<u></u> tag

<font></font> tag

<img> tag

<video></video> tag

<form></form> tag

<table></table> tag

What are the heading tags?

● The tags used to show the text as heading as called as heading tags. HTML provides six types
of heading tags.

<h1></h1> tag, called as heading 1. Biggest heading

<h2></h2> tag, called as heading 2

<h3></h3> tag, called as heading 3

<h4></h4> tag, called as heading 4

<h5></h5> tag, called as heading 5

<h6></h6> tag, called as heading 6. Smallest heading


What are the attributes?

● The properties applied on the tags to perform advanced actions on the tags are called
attributes.

For example,

All the heading tags have align attribute to align the text as left, right or center

Note: Attributes are written in the opening part of the tag separated by space.
What are various text formatting tags in HTML?

● HTML provides many text formatting tags, some important ones are
o <b></b> to make some text as bold
o <i></i> to make some text as italic
o <u></u> to make some text as underline
o <sup></sup> to make some text as superscript
o <sub></sub> to make some text as subscript
o <p></p> to create some paragraph. It also has align attribute
 align=’left | right | center | justify’
o <font></font> to define the font name, color and size using different attributes
 face='font name'
 color='color name or color code'
 size='n'

What is entity?

Sometimes we need to add some special characters and symbols in the web page. Such characters
and symbols are added in HTML page using some pre-defined names and codes that start with & and
closed with semicolon (;) are known as HTML Entities.

Entities can be of two types

● Named entities
● Numbered entities
Some of the named entities are

● &nbsp; space
● &gt; less than sign (<)
● &lt; greater than sign (>)
● &copy; copyright symbol (©)

Sum of the numbered entities are

● α &alpha; &#945;
● β &beta; &#946;
● ₹ &#8377;

What is a Hyperlink? How to create it?

A hyperlink is a link to some web page, images, website, email, file etc. It is used to navigate some
web page, website etc., It can also be used to download some file.

HTML provides <a></a> also known as anchor tag to create the hyperlinks with some attributes

● href='url’

● title=’some text’

● target='_blank'

Note: URL stands for Uniform Resource Locator. It is the path to reach some resource like image,
video etc. Here href stands for hyper reference which means reference of the resource which you
want to link. Here target='_blank' opens the given URL in new window or new tab.
What is anchor?

● A bookmark defined within the web page for navigation


● Syntaxes
○ <a name='anchorname'></a>
○ <a name='anchorname'>some text</a>
● Use #anchorname while creating the hyperlinks to the anchors
● Syntax
○ <a href='#anchorname'>some text or image</a>

How to show an image on a web page?

HTML provides <img> tag to insert an image into the webpage using following attributes

● src='source file name'


● width='x'
● height='y'
● alt='alternate text'
● title='image title'

Note: Web pages generally allow four types of image file

JPG or JPEG (Joint Photographic Experts Group)


PNG (Portable Network Graphics)
GIF (Graphic Interchange Format)
SVG (Scalable Vector Graphics)
What is list?
● A list is used for grouping the items
● HTML provides three types of lists
○ Ordered List <OL></OL>
○ Un-Ordered List <UL></UL>
○ Description List <DL></DL>

What is Ordered List?


● Ordered list provides a list in defined order based on numeric values or character values
using <OL></OL> tag
● Use type attribute to define type of order
● Use <LI></LI> tag to define the list item
● Syntax
<OL type='1 | A | a | I | i'>
<LI>item detail</LI>
</OL>

What is Un-ordered List?


● Un-ordered list provides a list without an order using some symbols using <UL></UL> tag
● Use type attribute to define type of order
● Use <LI></LI> tag to define the list item
● Syntax
<UL type=‘disc | circle | square | none'>
<LI>item detail</LI>
</UL>
What is Description List?
● The description list <DL></DL> provide the description of some items using data term
<DT></DT> and data description <DD></DD> tag
● Syntax
<DL>
<DT>data term</DT>
<DD>data definition</DD>
</DL>
Creating Tables

● Use <TABLE></TABLE> tag to create a table with sub tags <TR></TR>, <TD></TD>,
<TH></TH>

○ <TR></TR> defines the table row

○ <TD></TD> defines the table data

○ <TH></TH> defines the table heading

● Use attributes

○ align
○ border

○ width

Creating HTML Forms

● Use <form></form> tag to define an HTML Form


● Attributes
○ action='server side url'
○ method='get | post‘
○ enctype=‘multipart/form-data | application/x-www-form-urlencoded | text/plain '
Creating Form Controls

● <label></label> tag
○ Used to define the label for an input element
○ Attribute
■ for='element id'

● <input> tag
○ Used to create various types of controls
○ type='text | password | checkbox | radio | file | button | submit | reset | hidden |
date | time | datetime | number | email | url‘
○ placeholder='water mark text‘
○ required
○ autofocus
○ checked
○ size='n'
○ maxlength='n‘
○ value='any value'
● The <textarea></textarea> tag
○ Used to create multiline text
● Attributes
○ rows='n'
○ Cols='n'
● The <select></select> tag
○ Used to create a dropdown list
○ Use <option></option> sub tag to defines the dropdown options
● Attribute
○ value='option value'
What is semantic HTML?

● A semantic element clearly describes its meaning to both the browser and the developer

● Using semantic HTML is noted as part of the HTML5 standard

● To define the layout of the web page, HTML provides various tags

● <div></div>
● <section></section>
● <header></header>
● <footer></footer>
● <main></main>
● <aside></aside>
● <nav></nav>
● <article></article>
● <code></code>
● <mark></mark>

What is CSS?

● CSS stands for cascading style sheets.


● It is a design language that makes a website look more appealing than just plain or
uninspiring pieces of text.
● Whereas HTML largely determines textual content, CSS determines visual structure, layout,
and aesthetics.
● HTML is a markup language, and CSS is a style sheet language.
● Think “look and feel” when you think CSS.

How to use the CSS?

● CSS provides a big set of pre-defined properties to apply the styling on HTML contents using
key:value pair model.
● Each key:pair is separated by semicolon
○ color:'color name or code'
○ background-color:'color name or code'
○ text-align:'left | right | center | justify‘
○ font-size:'n'
○ font-weight: 'bold'
○ font-family:'font name‘
○ text-transform:'uppercase | lowercase | capitalize'
○ text-decoration:'underline | overline | line-through| none‘
○ display:'none | block | inline'

What are different types using CSS?

● CSS can be applied using three ways

○ Inline CSS
○ Internal CSS
○ External CSS

What is mean by Inline CSS?

● When the CSS codes get applied directly on a tag using STYLE attribute, it is known as inline
CSS
● Use the codes using key:value pair model
● Use semicolon (;) when as separator when using multiple codes
● Just like HTML, CSS is also case insensitive
What is meant by Internal CSS?

● When we apply styling on all or selected set of elements in a web page, it is called as internal
CSS
● Use <style></style> tag to create such styles

What is external CSS?


● We can create a file having styling effects and use that file in all the web pages of a website
or even in multiple websites
● Such method of using styling is called as external CSS
● Here we need to use <link> tag to define the external CSS file name

<link href='filename.css' rel='stylesheet'>

You might also like