Scribd
Upload
15 views

HTML UNIT 1-Merged

The document discusses various HTML tags such as headings, paragraphs, lists, images, and tables that are used to structure and format content on web pages. It explains that HTML tags contain opening and closing tags to define elements like titles, headings, paragraphs, and that the <body> tag is used to insert content. Basic HTML document structure is also covered, showing the main tags used like <head>, <title>, and <body> that provide the framework for a web page.

Uploaded by

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

HTML UNIT 1-Merged

The document discusses various HTML tags such as headings, paragraphs, lists, images, and tables that are used to structure and format content on web pages. It explains that HTML tags contain opening and closing tags to define elements like titles, headings, paragraphs, and that the <body> tag is used to insert content. Basic HTML document structure is also covered, showing the main tags used like <head>, <title>, and <body> that provide the framework for a web page.

Uploaded by

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

Ist year Bsc computer science Notes 5. WHAT IS HTML TAGS?

5. WHAT IS HTML TAGS? The <i> tag is used to make the text italic. HTML NOTES
HTML tags are like keywords which defines that how web browser will
UNIT I Underline Tag UNIT II
format and display the content. With the help of tags, a web browser can
1. WHAT IS INTERNET? distinguish between an HTML content and a simple content. HTML tags The <u> tag is used to set the text underline. HTML Document Structure
contain three main parts: opening tag, content and closing tag. But some Bold_italic_underline Basic HTML Document Structure
The internet is defined as a global network of linked computers,
HTML tags are unclosed tags.
servers, phones, and smart appliances that communicate with each HTML, as previously said, is a markup language that uses multiple tags to structure the
other using the transmission control protocol (TCP) standard to output_page document. These tags are surrounded by angle braces <Tag Name>. Except for a few tags,
6. UNDERSTANTING TAGS?
enable the fast exchange of information and files, along with other the majority of tags contain matching closing tags. For example, a <head> tag has a closing
Basic HTML Tags Link Tag tag </head>, and a <body> tag has a closing tag </body> tag, and so on. The following
types of services.
template shows a basic structure of a HTML document.
Head Tag The <a> tag links one page to another page. The href attribute is used to
Internet infrastructure comprises optical fiber data transmission define
The head tag <head> contains all the elements describing the document.
cables or copper wires, as well as numerous additional networking
infrastructures, such as local area networks (LAN), wide area Title Tag Anchor_tag-html_tags
networks (WAN), metropolitan area networks (MAN), etc. Output_anchor_tag
The title tag <title> specifies the HTML page title, which is shown in the
Sometimes wireless services such as 4G and 5G or WiFi necessitate
browser’s title bar. List Tag
similar physical cable installations for internet access.
Body Tag The <li> tag is used if you want to enter the contents in the listed order.
2. WHAT IS WEB BROWSER? The body tag <body> is where you insert your web page’s content. There are two types of lists.

A web browser is a type of software that allows you to find and view Paragraph Tag Ordered list <ol>
websites on the Internet. Even if you didn't know it, you're using a web Unordered list <ul>
A paragraph tag <p> is used to define a paragraph on a web page.
browser right now to read this page! There are many different web list_tag-html_tags
browsers, but some of the most common ones include Google Chrome, Heading Tag
Safari, and Mozilla Firefox. Image Tag
The HTML heading tag is used to define the heading of the HTML
document. The <h1> tag defines the most important tag, and <h6> The <img> tag is used to embed an image in an HTML document. You
3. WHAT IS WEB SITE? defines the least. need to specify the source of the image inside the tag.
A website is a collection of publicly accessible, interlinked Web pages The center tag will center your content.
that share a single domain name. Websites can be created and maintained Let’s practice using these tags and create a web page with them:
by an individual, group, business or organization to serve a variety of The Table Tag
purposes. Together, all publicly accessible websites constitute the World Title_and_heading_tag-html Block-level Elements
The <table> tag is used to create a table in the HTML document. A block-level element always starts on a new line, and the browsers automatically add some
Wide Web. Formatting Tags space (a margin) before and after the element.
The table row (<tr>) tag is used to make the rows in the table, and the
4. WHAT IS WEB PAGE? Emphasis tag
table data (<td>) tag is used to enter the data in the table. A block-level element always takes up the full width available (stretches out to the left and
A web page is a document written in hypertext (also known as HTML) The HTML <em> tag is used to emphasize the particular text in a right as far as it can).
that you can see online, using a web browser. Most web pages include paragraph. The style (<style>) tag is used to add methods to the content by typing
text, photos or videos, and links to other web pages. A group of many Two commonly used block elements are: <p> and <div>.
the code in the HTML file itself.
web pages managed by one person or company is a website. Bold Tag
The <p> element defines a paragraph in an HTML document.
The <b> tag is used to make the text bold.
The <div> element defines a division or a section in an HTML document.
Italic Tag

As you can see, the italic element is delimited by the <I> and </I> tags. Text Alignment
Background Color
Small The CSS text-align property defines the horizontal text alignment for an HTML element:
The small element specifies that text should be rendered in a smaller size. Here's a sample The CSS background-color property defines the background color for an HTML element.
paragraph with the small element: Example
Example <h1 style="text-align:center;">Centered Heading</h1>
Don't forget to read the fine print before you sign anything. Set the background color for a page to powderblue: <p style="text-align:center;">Centered paragraph.</p>

Here's the code: <body style="background-color:powderblue;">

<P> <h1>This is a heading</h1>


Don't forget to read the <p>This is a paragraph.</p>
<SMALL>fine print</SMALL>
Font-Style Elements before you sign anything. </body>
</P> Example
As you can see, the small element is delimited by the <SMALL> and </SMALL> tags. Set background color for two different elements:
We'll examine four font-style elements here:
Big <body>
1.bold
The big element is similar to the small element, but it works in reverse. Here's a sample
2.italic
paragraph with the big element: <h1 style="background-color:powderblue;">This is a heading</h1>
3.small
<p style="background-color:tomato;">This is a paragraph.</p>
4.big
It's a really great sale!
Bold
</body>
The bold element specifies that text should be rendered in boldface. Here's a sample
Actually this paragraph contains three instances of the big element. They're nested inside one
paragraph which contains a bold element.
another to demonstrate their cumulative effect. (The small element works the same way.) Text Color
Here's the code:
Important: All staff members are required to wear the funny hats.
The CSS color property defines the text color for an HTML element:
<P>
Here's the code that makes it work:
It's a Example
<BIG>really <BIG>great <BIG>sale </BIG></BIG></BIG> <h1 style="color:blue;">This is a heading</h1>
<P>
</P> <p style="color:red;">This is a paragraph.</p>
<B>Important:</B> All staff members
As you can see, the big element is delimited by the <BIG> and </BIG> tags. Fonts
are required to wear the funny hats.
The CSS font-family property defines the font to be used for an HTML element:
</P>
As you can see, the bold element is delimited by the <B> and </B> tags. HTML Styles
Example
The HTML style attribute is used to add styles to an element, such as color, font, size, and <h1 style="font-family:verdana;">This is a heading</h1>
Italic
more. <p style="font-family:courier;">This is a paragraph.</p>
The italic element specifies that text should be rendered in an italic face. Here's a sample
Text Size
paragraph which contains an italic element.
The HTML Style Attribute The CSS font-size property defines the text size for an HTML element:
But I don't want to wear a funny hat. Setting the style of an HTML element, can be done with the style attribute.
Example
The HTML style attribute has the following syntax: <h1 style="font-size:300%;">This is a heading</h1>
Here's the code that makes it work:
<p style="font-size:160%;">This is a paragraph.</p>
<P> <tagname style="property:value;">
But I don't <I>want</I> to wear a funny hat. The property is a CSS property. The value is a CSS value.
</P>
UNIT-3 What is a nested list in HTML? BR TAG: UNIT-4
A nested list is a list inside another list. You can create a nested unordered list, or a nested
LISTS & TYPES: The <br> tag in HTML document is used to create a line break in a text. TABLES
ordered list, or even an ordered list nested inside an unordered one.

HTML lists allow web developers to group a set of related items in lists. CREATING BASIC TABLE:
TYPES Define an HTML Table
ORDERED LISTS: A table in HTML consists of table cells inside rows and columns.
Syntax:
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Table Cells
The list items will be marked with numbers by default: Each table cell is defined by a <td> and a </td> tag.
Example td stands for table data.
<html> HTML Images:
Everything between <td> and </td> are the content of the table cell.
<body> The HTML <img> tag is used to embed an image in a web page. Example:
<h2>An ordered HTML list</h2> Images are not technically inserted into a web page; images are linked to web
<ol>
pages. The <img> tag creates a holding space for the referenced image.
<li>Coffee</li>
The <img> tag is empty, it contains attributes only, and does not have a closing
<li>Tea</li>
<li>Milk</li> tag.
OTHER TAGS: The <img> tag has two required attributes:
</ol>
</body> MARQUEE TAG: src - Specifies the path to the image
</html> O/P Example alt - Specifies an alternate text for the image.
The <marquee> tag is a container tag of HTML that is implemented for creating
1. COFFEE Syntax
scrollable text or images within a web page from either left to right or vice
2. TEA <img src="url" alt="alternatetext">
versa, or top to bottom or vice versa. But this tag has been deprecated in the
3. MILK
new version of HTML.
UNORDERED LISTS
An unordered list starts with the <ul> tag. Each list item starts with the <li> HR TAG Table Elements:
tag. Table Cells
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The list items will be marked with bullets (small black circles) by default: Each table cell is defined by a <td> and a </td> tag.
<!DOCTYPE html> The <hr> element is most often displayed as a horizontal rule that is used to
Td stands for table data.
<html> separate content (or define a change) in an HTML page.
Everything between <td> and </td> are the content of the table cell.
<body> Table Rows:
<h2>An unordered HTML list</h2> Table Rows
<ul> Each table row starts with a <tr> and ends with a </tr> tag.
<li>Coffee</li> Tr stands for table row.
<li>Tea</li> HTML Links - Hyperlinks
Table Headers:
<li>Milk</li> HTML links are hyperlinks.
Sometimes you want your cells to be table header cells. In those cases use the
</ul> You can click on a link and jump to another document.
<th> tag instead of the <td> tag:
</body> When you move the mouse over a link, the mouse arrow will turn into a little
th stands for table header.
</html> hand.
O/P EXAMPLE <a href="url">link text</a>
 Coffee <a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Monday HTML Table – Rowspan UNIT-V


* Entire Row is Aligned Top To make a cell span over multiple rows, use the rowspan attribute:
* FRAMES:
Wednesday
HTML <frame> Tag:
* Align Middle (default) Align Bottom
* The <frame> tag was used in HTML 4 to define one particular
Friday window (frame) within a <frameset>.
* Align Top Align Bottom
<TABLE BORDER=1> Use the <iframe> tag to embed another document within the current
<TR VALIGN=TOP> HTML document:
<TH>*<BR>Monday<BR>*</TH>
<TD>Entire Row is</TD> HTML Table – <iframe src="https://www.w3schools.com"></iframe>
<TD>Aligned Top</TD> Cell Padding
</TR> Cell padding is the space between the cell edges and the cell content.
<TR> By default the padding is set to 0.
Table cell alignment <TH>*<BR>Wednesday<BR>*</TH> To add padding on table cells, use the CSS padding property:
Table with Cells Aligned Left, Right, and Center <TD>Align Middle (default)</TD>
......Monday...... .....Wednesday.... ......Friday...... <TD VALIGN=BOTTOM>Align Bottom</TD>
Align </TR>
Left (default) Align <TR>
Center Align <TH>*<BR>Friday<BR>*</TH> FRAMES SET:
Right <TD VALIGN=TOP>Align Top</TD>
Entire Row Is Aligned Center <TD VALIGN=BOTTOM>Align Bottom</TD> The <frameset> tag was used in HTML 4 to define a frameset.
<TABLE BORDER=1> </TR> Use the <iframe> tag to embed another document within the current
<TR> <TH>......Monday......</TH> <TH>.....Wednesday....</TH> </TABLE>
HTML document:
<TH>......Friday......</TH> </TR> HTML Table – HTML Table –
<TR> Colspan Cell Spacing <iframe src="https://www.w3schools.com"></iframe>
<TD>Align<BR> Left (default)</TD> To make a cell span over multiple columns, use the colspan attribute Cell spacing is the space between each cell.
<TD ALIGN=CENTER>Align<BR> Center</TD> By default the space is set to 2 pixels.
<TD ALIGN=RIGHT>Align<BR> Right</TD> To change the space between table cells, use the CSS border-spacing property
</TR> on the table element:
<TR ALIGN=CENTER>
<TD>Entire Row</TD>
<TD>Is Aligned</TD>
<TD>Center</TD>
</TR> HTML | <link> target Attribute
</TABLE> The HTML <link> target Attribute is used to specify the window or a frame
where the linked document is loaded. It is not supported by HTML 5.
Table with Cells Vertically Aligned Top, Bottom, and Middle Syntax:
* <link target="_blank|_self|_parent|_top|framename">
HTML <noframes> Tag:
The <noframes> tag was used in HTML 4 to act as a fallback tag for
browsers that did not support frames.
Use the <iframe> tag to embed another document within the current
HTML document:
<iframe src="https://www.w3schools.com"></iframe>

HTML <form> Tag:


An HTML form with two input fields and one submit button:
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form
elements:
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<output>

You might also like