Scribd
Upload
1 views6 pages

HTML Code Explanation

The document provides a detailed explanation of HTML code structure and components, including the purpose of various tags such as <html>, <head>, <style>, and <body>. It covers the use of internal and external CSS, text elements, images, links, and tables, highlighting their functionalities and attributes. Overall, it serves as a guide for understanding the basics of HTML5 document creation.

Uploaded by

mahith.s.herath
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views6 pages

HTML Code Explanation

The document provides a detailed explanation of HTML code structure and components, including the purpose of various tags such as <html>, <head>, <style>, and <body>. It covers the use of internal and external CSS, text elements, images, links, and tables, highlighting their functionalities and attributes. Overall, it serves as a guide for understanding the basics of HTML5 document creation.

Uploaded by

mahith.s.herath
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML Code Explanation

<!DOCTYPE html>

Purpose:
Tells the browser this is an HTML5 document.

<html>

Purpose:
Starts the entire HTML page.

<head>

Purpose:
Contains settings, styles, and links that are not directly shown on the webpage.

<style>

Purpose:
Creates Internal CSS.

Internal CSS styles elements directly inside this HTML file.

p { color: blue; }

Purpose:
Makes all <p> paragraph text blue.

 p → selects all paragraph elements

 color → changes text color

 blue → the color used

table, th, td, tr

Purpose:
Selects:
 tables

 table headers

 table cells

 table rows

so the same styling applies to all of them.

border: 1px solid black;

Purpose:
Adds a thin black border.

 1px → border thickness

 solid → border style

 black → border color

padding: 15px;

Purpose:
Adds spacing inside table cells.

This makes the table look less cramped.

<link rel="stylesheet" href="[Link]">

Purpose:
Connects an External CSS file called [Link].

 rel="stylesheet" → says the file contains CSS

 href="[Link]" → location/name of the CSS file

BODY SECTION

<body style="background-color: skyblue;">


Purpose:
Starts the visible webpage and makes the background sky blue.

 style="" → Inline CSS

 background-color → changes page background color

 skyblue → chosen color

TEXT ELEMENTS

<p>

Purpose:
Creates a paragraph.

<h1>

Purpose:
Creates the largest heading.

<h2>

Purpose:
Creates a slightly smaller heading.

<h3>

Purpose:
Creates a smaller heading.

style="color: red;"

Purpose:
Uses Inline CSS to color only that specific element red.

IMAGE SECTION
<img src="[Link]" width="200" height="400">

Purpose:
Displays an image.

Parts:

 src="[Link]" → image file name

 width="200" → image width

 height="400" → image height

CLICKABLE IMAGE

<a href="[Link]">

Purpose:
Creates a clickable link.

Anything inside this tag becomes clickable.

<img src="[Link]"...>

Purpose:
Places an image inside the link.

This means:

Clicking the image opens another HTML page.

href="[Link]"

Purpose:
Tells the browser which file to open.

NORMAL TEXT LINK

<a href="[Link]">

Purpose:
Creates a clickable text link.
When clicked, it opens:
[Link]

TABLE SECTION

<table>

Purpose:
Starts a table.

<tr>

Purpose:
Creates a table row.

<th>

Purpose:
Creates a table heading cell.

Example:

 Name

 Age

These are usually bold automatically.

<td>

Purpose:
Creates a normal table data cell.

Example:

 Mahith

 14

</table>
Purpose:
Ends the table.

ENDING TAGS

</body>

Purpose:
Ends the visible webpage section.

</html>

Purpose:
Ends the entire HTML document.

You might also like