html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
, headings, paragraphs, links, images, lists, tables, forms, and more. It also covers the difference between block, inline and inline-block display properties.">
Scribd
Upload
9 views

HTML Basics

The document defines and explains HTML elements and tags. It provides examples of common tags like <html>, <head>, <body>, headings, paragraphs, links, images, lists, tables, forms, and more. It also covers the difference between block, inline and inline-block display properties.

Uploaded by

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

HTML Basics

The document defines and explains HTML elements and tags. It provides examples of common tags like <html>, <head>, <body>, headings, paragraphs, links, images, lists, tables, forms, and more. It also covers the difference between block, inline and inline-block display properties.

Uploaded by

mhashimzaffar1995
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Table of contents

1. <html>_____________________________________________________________2
2. <head>____________________________________________________________ 2
3. <title>_____________________________________________________________ 2
4. <body>____________________________________________________________ 2
5. <h1> to <h6>________________________________________________________3
6. <p>_______________________________________________________________ 3
7. <a>_______________________________________________________________ 3
8. <img>_____________________________________________________________ 3
9. <ul>______________________________________________________________ 3
10. <ol>______________________________________________________________4
11. <li>_______________________________________________________________4
12. <div>_____________________________________________________________ 4
13. <span>___________________________________________________________ 4
14. <table>___________________________________________________________ 4
15. <tr>______________________________________________________________ 5
16. <th>_____________________________________________________________ 5
18. <form>___________________________________________________________ 5
19. <input>___________________________________________________________ 6
20. <textarea>________________________________________________________ 6
21. <select>__________________________________________________________ 6
22. <option>__________________________________________________________6
23. <button>_________________________________________________________ 6
24. <label>___________________________________________________________ 7
25. <iframe>__________________________________________________________ 7
26. <meta>___________________________________________________________ 7
27. <style>___________________________________________________________ 7
28. <script>__________________________________________________________ 7
29. <link>____________________________________________________________ 8
1. <html>
Defines the root of an HTML document.

Example: The whole structure of a webpage is wrapped in <html> tags.


HTML

example:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>

2. <head>
Contains meta-information about the document, such as its title and links to stylesheets.

Example: Setting the title of the webpage.


html

example:
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>

3. <title>
Defines the title of the document, shown in the browser's title bar or tab.

Example: Naming the webpage.


html
Copy code
<title>My Webpage</title>

4. <body>
Contains the content of the HTML document, such as text, images, and links.

Example: The main content of a webpage.


html
Copy code
<body>
<h1>Welcome to My Website</h1>
<p>This is my homepage.</p>
</body>

5. <h1> to <h6>
Define HTML headings, with <h1> being the highest (or most important) level and <h6>
the least.

Example: Using headings to structure content.


html
Copy code
<h1>Main Heading</h1>
<h2>Subheading</h2>

6. <p>
Defines a paragraph of text.

Example: Creating a paragraph.


html
Copy code
<p>This is a paragraph of text.</p>

7. <a>
Defines a hyperlink, which links to another document or resource.

Example: Creating a clickable link.


html
Copy code
<a href="https://www.example.com">Visit Example</a>

8. <img>
Embeds an image on the webpage.

Example: Displaying an image.


html
Copy code
<img src="image.jpg" alt="A description of the image">
9. <ul>
Defines an unordered (bulleted) list.

Example: A list of items.


html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

10. <ol>
Defines an ordered (numbered) list.

Example: A numbered list of steps.


html
Copy code
<ol>
<li>First step</li>
<li>Second step</li>
</ol>

11. <li>
Defines a list item.

Example: An item within a list.


html
Copy code
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

12. <div>
Defines a division or a section in an HTML document, often used as a container for other
elements.

Example: Grouping content together.


html
Copy code
<div>
<h1>Header</h1>
<p>Some text.</p>
</div>

13. <span>re
Used to group inline elements in a document.

Example: Styling a part of the text.


html
Copy code
<p>This is <span style="color:red">important</span> text.</p>

14. <table>
Defines a table.

Example: Creating a table.


html
Copy code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

15. <tr>
Defines a row in a table.

Example: A row with two cells.


html
Copy code
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
16. <th>
Defines a header cell in a table.

Example: A header cell in a table row.


html
Copy code
<th>Header</th>
17. <td>
Defines a standard cell in a table.

Example: A cell containing data.


html
Copy code
<td>Data</td>

18. <form>
Defines an HTML form for user input.

Example: A form for submitting data.

<form action="/submit"> <!-- The form element that will send user input data to the
server at the "/submit" URL when submitted -->
<label for="name">Name:</label> <!-- A label for the text input field, associating the
text "Name:" with the input field with id="name" -->
<input type="text" id="name" name="name"> <!-- A text input field where users can
enter their names. The id is "name" for referencing and the name is "name" for form data
submission -->
<input type="submit" value="Submit"> <!-- A submit button that, when clicked,
submits the form data to the server -->
</form> <!-- Closing the form element -->

19. <input>
Defines an input control.

Example: A text input field.


html
Copy code
<input type="text" id="name" name="name">

20. <textarea>
Defines a multi-line text input control.
Example: A large text input area.
html
Copy code
<textarea id="message" name="message"></textarea>

21. <select>
Defines a drop-down list.

Example: A selection menu.


html
Copy code
<select name="choices" id="choices">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

22. <option>
Defines an option in a drop-down list.

Example: An option in a select menu.


html
Copy code
<option value="option1">Option 1</option>

23. <button>
Defines a clickable button.

Example: A button to submit a form.


html
Copy code
<button type="submit">Submit</button>

24. <label>
Defines a label for an input element.

Example: Labeling a text input.


html
Copy code
<label for="name">Name:</label>
25. <iframe>
Defines an inline frame that embeds another document within the current HTML
document.

Example: Embedding a Google Map.


html
Copy code
<iframe src="https://www.google.com/maps/embed?..."></iframe>

26. <meta>
Provides metadata about the HTML document, such as character set, author, and
viewport settings.

Example: Setting the character set.


html
Copy code
<meta charset="UTF-8">

27. <style>
Defines style information for the document.

Example: Adding internal CSS.


html
Copy code
<style>
body {
font-family: Arial, sans-serif;
}
</style>

28. <script>
Defines client-side JavaScript.

Example: Adding a script to alert a message.


html
Copy code
<script>
alert('Hello, world!');
</script>
29. <link>
Defines the relationship between the current document and an external resource,
typically used to link to stylesheets.

Example: Linking an external CSS file.


html
Copy code
<link rel="stylesheet" href="styles.css">

Important concept (difference between block, inline, inline-block) display properties:

1. Block display:
● Height and width can be defined to block display items.
● Always start with a new line.
● There will always be one block element in one line.

2. Inline display:
● Users cannot define the Height and width of inline display items.
● inline display items can come after others in the same line.

3. Inline-block display:
● Height and width can be defined to Inline-block display items.
● Inline-block display items can come after others in the same line.

You might also like