HTML* is a MUST for anyone that wants to become a Web Developer.
It is a standard markup language for creating web pages. It consists of series of elements with open tag , some contents and closed tag.
An HTML elements is defined by a start tag <> with some content and ends with end tag </>
Note ;The content inside the tag will be displayed in the web browser while the element will be shown in the browsers title bar.
The main purpose of a web browser (Chrome, Firefox,Brave) is to read HTML documents and display them correctly.
<h1>Muhakeem</h1>
The output is;
Muhakeem
The output is below;
HTML Stands for Hyper Text Markup Language, It is the standard markup language for creating web pages, it tells the browser how to display its content.
Brief History of HTML
credit w3school.
There are a lot of was you can write HTML code, the tools used in writing code are called Code Editor, There are a lot of available code editors available for both Moblie users and System users.
For Mobile Users
• Anwriter
• Spcck Code Editor
• Sublime text
• Sololearn Code editor
For Sytem Users:
• VS Code Editor
• Note pad
• Quick edit.
How to Write HTML Code
• Open Your Code Editor. Write the basic HTML code as shown below
• Write the Title
• Preview It
• Save your Document
All HTML document are end with the file extension of .html All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with and ends with . The visible part of the HTML document is between and .
HTML ELEMENTS
As mentioned earlier that all HTML element always has a start tag <> with content and an end tag </> but there are some element that does not have an end tag or content, such element are called EMPTY ELEMENTS
HTML element can contain other element which means they can be Nested For example, look at the code below;
The **<html>** element defines the whole HTML documents and serves as the root of the document, it has a start tag <html> and also an end tag </html>
The inside the we have the which also contains the <h1>tag
HTML tags are not case sensitive: |<P> means the same as <p>.
But I personally recommend using lowercase when writing HTML code.
HTML ATTRIBUTES
All HTML element can have additional information by adding an attributes to it, HTML attributes are always specified at the start tag and they always come like this name="value"
THE HREF ATTRIBUTE
This attribute always start with which defines the hyperlink while the href attributes specifies where the link go to.
You will learn more about this
THE SRC ATTRIBUTE
This attribute are used for images but it used to start with the <img>which is used to embed the image and the src are used to specifies the path of the image.
There are two ways in which the src attribute can be used;
• The images are hosted on the same folder where the HTML code is saved or within where the website is hosted.
• Using external images, this can be done by linking to an external images on another website.
The output is shown below:
I can change the width and height of this image by using the width and height attributes.
In the image above I have changed the width and height of the image by changing it to width="400" height="500" Therefore the WIDTH AND HEIGHT ATTRIBUTE can be changed using the width="any number you want to use" height="any number you want to use"
The output is shown below;
Due to slow connection or an error in the src attributes the image may not be displayed but we can use the alt attribute to show
a specifies test for the image.Like the example below;
This means if for one reason or another the image did not display, the alt attributes MUHAKEEM BLOG will show instead.
###
THE LANG ATTRIBUTES
When writing HTML codes, we can use the lang attributes inside the <html> tag to tell us the language we are writing in English.
HTML HEADING
The<h1> to <h6> tags in HTML are used to define headings.
The most significant heading is defined by <h1>. The least significant heading is designated as <h6>.
The output is this
Main headings should start with a <h1> heading, then move on to h2 headings, h3 headings, and so forth.
HTML PARAGRAPH
A paragraph in HTML is defined by the <p> element.
Browsers automatically add some white space (a margin) before and after a paragraph, which always begins on a new line.
The <hr> element, which is frequently shown as a horizontal rule, is used to divide information (or specify a change) in an HTML page.
If you want to create a new line without beginning a new paragraph, use the symbol <br>
HTML TEXT FORMATTING
- The HTML element and . The both are used to make the HTML code to be very body,the are used with no stone importance while the later is with strong importance.
- The and Italic text is commonly shown within of I and em> tags.
- The HTML element defines smaller text
<small> This text is small </small>
Text that has been removed from a document is defined with the HTML element. Deleted content is typically indicated by a line through by browsers
A text that has been added into a document is defined by the <ins>HTMLelement. Usually, entered text is underlined by browsers.
The HTML <sub> element defines subscript text,Subscript text can be used for chemical formulas.
The HTML <sup> element defines superscript text,Superscript text can be used for footnotes.
A passage that is quoted from another source is designated by the HTML <blockquote>element.
Blockquote elements are typically indented by browsers.
A brief quotation is defined by the HTML <q> tag.
The quotation is typically surrounded by quotation marks in browsers.
The HTML <bbr> tag defines an acronym or abbreviation, such as "HTML," "CSS," "Mr.," "Dr.," "ASAP," or "ATM."
Browsers automatically append a line break before and after the <address>element, and the text there often renders in italic.
Bi-Directional Override is referred to as BDO.
The current text direction can be overridden using the HTML <bdo>tag.
The following syntax can be used to add comments to your HTML source:
< !-- Write your comment here -- >
You'll see that the start tag has an exclamation point (!) while the end tag does not.
Although comments are not shown by browsers, they can aid in the documentation of your HTML source code.
Content can be hidden using comments. Additionally, you can conceal many lines. The display will not show anything between the < !-- and the -- >.
HTML COLORS
There are 140 recognized color names in HTML. A color name can be used in HTML to specify a color. HTML elements' backgrounds can be changed. The color of the text can be changed. You can customize the border color:
RGB and RGBA colors in HTML Red, green, and blue light sources are each represented by an RGB color value.
An RGBA color value is an RGB value with an Alpha channel added (opacity).
Color Values in RGB The following formula can be used to specify an RGB value for a color in HTML:
rgb (red, green, blue)
The red, green, and blue parameters each have a value between 0 and 255 that describes the color's intensity.
This indicates that there are 16777216 possible colors, or 256, 256, 256!
Because red is assigned to its greatest value (255), and the other two colors (green and blue) are set to 0, rgb(255, 0, 0), for instance, displays as red.
Using rgb(0, 255, 0) as another example, green is displayed because green is set to the highest.
HTML LIST
Lists make up a large portion of web material, and HTML contains specific components for them.
We have
- Ordered List
They are used for lists, such as recipes, where the order of the elements mentioned does matter. These have an <ol> element surrounding them.
- Unordered List.
For lists where the order of the elements doesn't matter, like a shopping list, use an unordered list. These are contained within the ul> element.
The <li> tag appears at the top of each list item. The terms (names) are defined by the <dt> tag, the <dl> tag specifies the description list, and the dd> tag explains each term.
<ul>
<li>Hashnode</li>
<li>Medium</li>
<li>Wordpress</li>
</ul>
<ol>
<li>Hashnode</li>
<li>Medium</li>
<li>Wordpress</li>
</ol>
<dl>
<dt>Hashnode</dt>
<dd>-Muhameem Blog</dd>
<dt>Muhakeem</dt>
<dd>-Writes at Hashnode</dd>
</dl>
HTML TABLE
Table cells enclosed in rows and columns make up an HTML table. A <td> tag and a </td> tag define each table cell.
Table data is what it's called.
Text, photos, lists, links, other tables, and many other HTML elements can be included in a table cell.
You might occasionally want your cells to act as table header cells. Use the th tag in those circumstances rather than the td tag:
Every table row has a <tr> tag at the beginning and a `</tr>ag at the end.
Table row is referred to as tr. The contents of the table cell are everything between the