HTML Overview: Basic HTML concepts
Published: 2023-07-05 11:39:20

### What Is HTML

|                    H |                   T |                 M |                   L |
| --- | --- | --- | --- |
| Hyper | Text | Markup | Language  |
| Reference/Link | Data/Information  | Predefined/ Marked | Communication |

### Today we are learning the tags

|   Tag Name  |                   What is it used for? |                      Example |
| --- | --- | --- |
| <p> | Defines a paragraph. | <p>This is some text in a paragraph.</p> |
| <img> | used to embed an image in an HTML page. | <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> |
| <title> | defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. | <head>
  <title>HTML Elements Reference</title>
</head> |
| <html> | represents the root of an HTML document. | <!DOCTYPE html> </html> |
| <br> | inserts a single line break. | <p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p> |
| <span> | inline container used to mark up a part of a text, or a part of a document. | <p>My mother has <span style="color:blue">blue</span> eyes.</p> |
| <li> | defines a list item. The tag is used inside ordered lists (<ol>) and unordered lists (<ul)> | <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> |
| <ul> | defines an unordered (bulleted) list. | <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> |
| <ol> | defines an ordered list. An ordered list can be numerical or alphabetical. | <ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> |
| <a> | defines a hyperlink, which is used to link from one page to another. | <a href="https://www.freelancernazmul.net">Visit my website </a> |

### HTML Structure definition

- Doctype: give information to the browser about the document type and version.
- HTML: represents the root of an HTML document. It is a container for all the html elements except. for the Doctype.
- Head: a container for metadata and is placed between the <html> tag and the <body> tag.
- Meta: defines metadata about an HTML document. Metadata is data (information) about data.
- Title: tag defines the title of the document.
- body: caontins all the contens of an HTML document.
- comment: a section of text that is not processed by the web browser. Comments are enclosed in <!— this is the  comment—>

### 2 types of HTML tags: block and inline

**List of block level elements:**

- p
- h1, h2, h3, h4, h5, h6
- ol, ul
- pre
- address
- blockquote
- dl
- div
- fieldset
- form
- hr
- noscript
- table

**List of inline elements:**

- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea

# Practice task

### Practice Task 1

Create a basic HTML page structure with the doctype, html, head, meta, title and body tags

The title will be "My Travel Blog"

Add comments to the code to explain each section. For example, "this is the head section

### Practice Task 2

Create a heading tag that will have the text "My

Travel Blog"

Format the text in your heading tag using italic

### Practice Task 3

Create a div and inside the div create a paragraph.

Write about your experience.

Add a button having the text "Read More"

### Practice Task 4

Create a span tag which will be outside the div. It will have the text "What I bought"

Format the text in your span tag bold.

Create an ordered list of things you bought from the place you visited

Create another span tag with the text "My favorite food" and make it bold

Create an unordered list of your favourite food you

ate in that place

### Practice Task 5

Insert an image of your favourite food using the img tag and add the src, alt, width, and height attributes to it.

### Practice Task 6

Create a link to your favourite song you listened to while travelling using the anchor tag and add the href and target attributes to it. Copy the URL link from YouTube.

Use line breaks <br> where necessary