0% found this document useful (0 votes)
16 views21 pages

HTML Basics: Tags, Headings, Lists

Uploaded by

zeiadabdelsttar
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
0% found this document useful (0 votes)
16 views21 pages

HTML Basics: Tags, Headings, Lists

Uploaded by

zeiadabdelsttar
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

HTMLCourse

HTML > hyper text markup language

It is used to build websites and describe how your webpage and elements will be
displayed.

How it is written?
Using Tags > Tags are the primary component of the HTML that defines how the
content will be structured/ formatted.

There is two types of tags:


Open & closed tag.
Self closed tag.
It is quick example that displays heading and
paragraph .

What it is mean :

<!DOCTYPE html> : tells the browser that it


is HTML document.

<html> </html> : it is the root element you


write your whole program inside it.

<head></head>: here u write info about yr


program but it is not displayed for users but it
helps SEO to give yr website good rate.

<body> </body>: here u write yr elements


that will be displayed in yr website.
Headings
HTML headings : are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

. Search engines use the headings to index the structure and content of your web
pages.

Users often skim a page by its headings. It is important to use headings to show the
document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the
less important <h3>, and so on.

Each HTML heading has a default size. However, you can specify the size for any
heading with the style attribute, using the CSS font-size property
Paragraph
<p> tag is used to write paragraph and there is shourtcut in vs code if u wanna write
lorem text , just write lorem then enter and if u wanna specific numbers of words write
lorem + numbers.

Note:

The browser will automatically remove any extra spaces and lines when the page is
displayed.

Use <br> if you want a line break (a new line) without starting a new paragraph.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and
it preserves both spaces and line breaks
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

The most important attribute of

Links the <a> element is the href attribute,


which indicates the link's destination.

Href > hyper reference.

By default, the linked page will be


displayed in the current browser window.
To change this, you must specify another
target for the link.

The target attribute specifies where to


open the linked document.

The target attribute can have one of the


following values:
_self : Default. Opens the document in
the same window/tab as it was clicked
_blank : Opens the document in a new
window or tab
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

image
src - Specifies the path to the image
alt - Specifies an alternate text for the image.

Importance of alt attributes:

1- provides an alternate text for an image, if


the user for some reason cannot view it
(because of slow connection, an error in the
src attribute, or if the user uses a screen
reader).

2-SEO recognizes image only using alt


attributes so every image should have alt
attribute otherwise it will give u low rate.
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Unordered lists

The HTML <ul> tag defines an


unordered (bulleted) list.

<li>: list item.


The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Unordered lists
The CSS list-style-type property is used to define
the style of the list item marker.

It can have one of the following values:

Disc : Sets the list item marker to a bullet (default).


Circle : Sets the list item marker to a circle.
Square : Sets the list item marker to a square
None : The list items will not be marked
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Unordered lists

Lists can be nested (list inside list):


The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

ordered lists

The HTML <ol> tag defines an ordered


list. An ordered list can be numerical or
alphabetical.
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

ordered lists
By default, an ordered list will start
counting from 1. If you want to start
counting from a specified number,
you can use the start attribute
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Tables

<table> : Defines a table


<th> : Defines a header cell in a table
<tr> : Defines a row in a table
<td> : Defines a cell in a table
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Form
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Form
The HTML <form> element is used to create an HTML form
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
<input type="text">Displays a single-line text input field
<input type="radio">Displays a radio button (for selecting one of many choices)
<input type="checkbox">Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">Displays a submit button (for submitting the form)
<input type="button">Displays a clickable button
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user
focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Name attribute helps backend developer understand data sent to him so for example instead of sendig data (aya –ali) using
name data will be sent like that (fname=aya, lastname=ali).
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Select
The <select> element defines a drop-down list
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

Textarea
The <textarea> element defines a
multi-line input field (a text area).

The rows attribute specifies the


visible number of lines in a text area.

The cols attribute specifies the


visible width of a text area.
The most important attribute of the <a> element is the href attribute, which indicates the link's destinatio

button
The <button> element defines a clickable button:
See
yOU
next
HTML Course :

summary
[Link]
Px4JeUBem5ZnwdHR&pp=gAQB

You might also like