Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

HTML Basics (1)

HTML (HyperText Markup Language) is the standard markup language for creating web pages, utilizing tags to structure content such as text, images, and links. An HTML document follows a defined structure, typically including elements like <html>, <head>, and <body>, and is saved with a .html extension. The document can contain various tags for formatting, lists, links, images, tables, and forms, which are interpreted by web browsers.

Uploaded by

socse.divyasree
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML Basics (1)

HTML (HyperText Markup Language) is the standard markup language for creating web pages, utilizing tags to structure content such as text, images, and links. An HTML document follows a defined structure, typically including elements like <html>, <head>, and <body>, and is saved with a .html extension. The document can contain various tags for formatting, lists, links, images, tables, and forms, which are interpreted by web browsers.

Uploaded by

socse.divyasree
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

1. What is HTML?

HTML (HyperText Markup Language) is the standard language used for


creating web pages and web applications. It structures content using
markup tags, defining elements such as text, images, links, and
multimedia.

 HTML is not a programming language; it is a markup language.

 It works with CSS (for styling) and JavaScript (for interactivity).

 HTML documents are interpreted by web browsers (e.g., Chrome,


Firefox, Edge).

2. HTML Documents

An HTML document is a file containing HTML code that structures a


webpage. It has a .html or .htm extension.
Each HTML document follows a defined structure, which browsers
understand and render accordingly.

3. Basic Structure of an HTML Document

Every HTML document consists of the following basic components:

html

<!DOCTYPE html>

<html>

<head>

<title>My First HTML Page</title>

</head>
<body>

<h1>Welcome to HTML</h1>

<p>This is my first web page.</p>

</body>

</html>

Explanation:

1. <!DOCTYPE html> – Declares the document type (HTML5).

2. <html> – The root element of the HTML document.

3. <head> – Contains meta-information (e.g., title, styles, scripts).

4. <title> – Defines the title of the webpage (appears in the browser tab).

5. <body> – Contains the content displayed on the webpage.

4. Creating an HTML Document

To create an HTML document:

1. Open a text editor (e.g., Notepad, VS Code, Sublime Text).

2. Write HTML code using the basic structure.

3. Save the file with a .html extension.

4. Open the file in a web browser to view the webpage.


5. Markup Tags

Markup tags are special keywords enclosed in angle brackets (< >) that
define elements on a webpage.
Most HTML tags come in pairs (opening tag and closing tag), while some
are self-closing.

Types of HTML Tags:

1. Structural Tags – Define the page structure (<html>, <head>,


<body>).

2. Text Formatting Tags – Control text appearance (<b>, <i>, <u>,


<strong>, <em>).

3. List Tags – Used to create lists (<ul>, <ol>, <li>).

4. Link Tags – Create hyperlinks (<a href="URL">).

5. Image Tag – Display images (<img src="image.jpg"


alt="description">).

6. Table Tags – Organize data in tables (<table>, <tr>, <td>, <th>).

7. Form Tags – Collect user input (<form>, <input>, <textarea>,


<button>).

8. Media Tags – Embed media (<audio>, <video>, <embed>).

6. Headings, Paragraphs, and Line Breaks

Headings (<h1> to <h6>)

HTML provides six levels of headings, from <h1> (largest) to <h6>


(smallest).

html

<h1>Main Heading</h1>
<h2>Subheading</h2>

<h3>Smaller Subheading</h3>

Paragraphs (<p>)

A paragraph is defined using the <p> tag.

html

<p>This is a paragraph of text.</p>

Line Breaks (<br>)

The <br> tag inserts a line break, moving text to a new line.

html

<p>This is the first line.<br>This is the second line.</p>

7. HTML Tags

Commonly Used Tags in HTML


Tag Description

<html> Defines the root of an HTML document.

<head> Contains metadata about the document.

<title> Sets the title of the webpage.

<body> Contains the content of the webpage.

<h1> to <h6> Define headings.

<p> Defines a paragraph.

<br> Inserts a line break.

<a href="URL"> Creates a hyperlink.

<img src="image.jpg" alt="desc"> Displays an image.

<ul> / <ol> Creates unordered/ordered lists.

<li> Defines a list item.

<table> Creates a table.

<tr> Defines a table row.

<td> Defines a table cell.

<th> Defines a table header cell.

<form> Defines a form for user input.

<input> Creates an input field.

<button> Defines a clickable button.

Basic Structure of an HTML Document


A simple HTML document consists of the following parts:
Simple Webpage with Headings and Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>Simple Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<p>Hello! I am learning HTML. This is a simple webpage.</p>
<h2>Contact</h2>
<p>Email: example@email.com</p>
</body>
</html>

Webpage with Lists and Links


<!DOCTYPE html>
<html>
<head>
<title>HTML Lists and Links</title>
</head>
<body>
<h1>My Favorite Websites</h1>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
</ul>
</body>
</html>

Webpage with Images and Formatting Tags


<!DOCTYPE html>
<html>
<head>
<title>HTML Images and Formatting</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<p><b>Here is a beautiful image:</b></p>
<img src="https://via.placeholder.com/300" alt="Sample Image">
<p><i>Image description goes here.</i></p>
</body>
</html>
Webpage with a Table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h1>Student Grades</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>Science</td>
<td>B</td>
</tr>
</table>
</body>
</html>

Webpage with Forms


<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>

You might also like