HTML Basics

What is HTML?
HTML or HyperText Markup Language is the standard markup language used to

create web pages.
HTML is written in the form of HTML elements consisting of tags enclosed
in angle brackets (like <html>). HTML tags most commonly come in pairs
like <h1> and </h1>, although some tags represent empty elements and so are
unpaired, for example <img>. The first tag in a pair is the start tag, and the
second tag is the end tag (they are also called opening tags and closing tags).
In Other words, HTML is used to write a web page's content, such as text, links,
and images.
Web pages are written in HTML. A web page is similar in structure to a news
article or a word document. The page usually starts with a main heading,
followed by a couple paragraphs, and perhaps a few images and subheadings to
further organize the article.
The difference is that a web page uses HTML elements to describe each piece of
content so that the web browser knows what a heading is and where a paragraph
starts and ends.
HTML elements are the building blocks of web pages.

HTML Tags:
HTML markup tags are usually called HTML tags.
HTML tags are keywords (tag names) surrounded by angle brackets like
<html>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a slash before the tag name
Start and end tags are also called opening tags and closing tags

What HTML elements are available and how are
they used? Here are five common HTML
elements.
A)
1 . Heading Elements
2 . The p Element
3.The a Element
4.The img Element
5. The ul Element

Heading Elements:

In HTML, headings are described by heading elements. There are six levels of
heading elements: h1 to h6

The h1 element is used to describe the main heading of the page.

Best practice: Always use closing tags

Not recommended: <h1>My first heading

Recommended: <h1>My first heading</h1>

An h1 element is made up of three parts:
1. An opening <h1> tag
2. The text of the heading
3. A closing </h1> tag.
These tags inform the web browser that the text is a main heading.

By changing the text within the opening <h1> and closing </h1> tags, you can
change the main heading of the web page.
The P Element
Similar to a news article or a word document, headings in a web page are usually
followed by paragraphs. In HTML, paragraphs are described by paragraph
elements, or p elements.
Similar to the h1 element, the p element is made up of three parts:
1. An opening <p> tag
2. The text of the paragraph
3. A closing </p> tag
These tags tell the web browser where a paragraph begins and ends.

The a Element:
The defining feature of the Web is the presence of links. Clicking on links leads to
other web pages. The a element is used to create links.
The a element looks similar to an h1 or p element. The only difference is that the
opening <a> tag has an attribute named href

Best practice: Use double quotation marks ("") around attribute
values

Not
recommended:<ahref='http://google.com'>google</a>

Recommended: <ahref="http://google.com">google</a>

An attribute gives more information about an HTML element. An attribute is made
up of two parts: a name and a value.
The attribute named href has a value which is the address of the page you want
people to go to when they click on the link text.

The Img Element:
Web pages are more than just text. In addition to headings and paragraphs, a
web page can have images. The img element is used to add images to a page.
The img element has two attributes inside the opening <img> tag
named src and alt.
Best practice: Don't include the trailing slash in img elements

Not recommended: <img src="url" />

Recommended: <img src="url" >

The value of the src attribute is the address of the image.
The value of the alt attribute is text describing the image.
Usually HTML elements are made up of an opening tag, some content, and a
closing tag. The img element has all the information it needs in its opening tag.
Therefore it can be written without content or a closing tag.

The Ul Element:

In addition to paragraphs and images, content can be presented as lists. In HTML,
a bulleted list is described using a ul element.
The ul element is commonly used to add navigation to the top of a web page.

Putting it all together

How are all these elements used together to create a real web page?
A web page is a collection of HTML elements. Here's an example of a web page.

A Basic HTML Web page looks like this:

Outcome:

The code starts with <!DOCTYPE html>. This needs to be at the start of
every HTML file.
Next there is an opening <html> tag and a closing </html> tag. Everything
in the HTML file is nested inside <html> and </html>. Remember to nest
elements by using 2 spaces for indentation.
Then there is an opening <body> tag and a closing </body> tag.
Thebody element contains the actual content of the web page - everything
nested inside <body> and </body> shows up in the web browser.
Then there is an h1 element describing a main heading of the page
After that is a p element with a short piece of text.

Interview question: What's the purpose
of <!DOCTYPE html>?
The doctype tells the browser which version of HTML you are using.
Writing <!DOCTYPE html> tells the browser that you are using HTML5, the
latest version of HTML. The doctype ensures that your web page displays
consistently when its visited from different browsers.

Another Basic Tag(Rarely Used):
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is used to separate content (or define a change) in an HTML
page.
Example:
<p>This text will be followed by a horizontal line <hr /></p>

How to decorate an <hr/> tag

<hr style = 'background-color:#000000; border-width:0; color:#000000;
height:2px; lineheight:0; display: inline-block; text-align: left;
width:50%;' />

You can Rather use a div tag:
<div style="height: 0; border-top: 2px solid #000000; width: 50%;
margin: 5px 0;"></div>

A DIV is not a HR and provides no fallback for simple display-programs.
Also it is easy to apply box-model formatting on a DIV and get the expected
results compared to applying the same on a HR and then testing in different
browsers.
Messing around with HR tags is a waste of time to me, as with any standard that
IE fails to adopt.

Now, whats a <div> tag?
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.

Example:

The Result:

The <br>Tag:
This tag is mainly used to break a paragraph and make your input be displayed
on the next line. Rather, than a few lines below.
The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
The <br> tag is best used for writing addresses or poems.

Example:

The Result:

Span Tag:
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a
document.

Tip: When a text is hooked in a <span> element, you can style it with CSS, or
manipulate it with JavaScript.

Example:

The Result:

HTML Basics

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Basics

Diunggah oleh

Hak Cipta:

Format Tersedia

What is HTML?

HTML or HyperText Markup Language is the standard markup language used to

Anda mungkin juga menyukai