{"id":20147,"date":"2020-12-23T11:30:20","date_gmt":"2020-12-23T11:30:20","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=20147"},"modified":"2022-04-28T09:01:02","modified_gmt":"2022-04-28T09:01:02","slug":"introduction-to-html-tutorial-2","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/introduction-to-html-tutorial-2\/","title":{"rendered":"Introduction to Html Tutorial"},"content":{"rendered":"\n

HTML Introduction<\/h2>\n\n\n\n

HTML is a markup language that is used to make attractive web pages with the help of styling, which looks like a good format on the web browser. An HTML document is made up of several HTML tags and each HTML tag has a different content.<\/p>\n\n\n\n

What is HTML?<\/h2>\n\n\n\n

The full name of HTML is a hypertext markup language. This is one way to display web pages with text, images, and multimedia content. It is considered the easiest language, people can easily learn it. HTML is not a programming language, but it is a markup language. The HTML file is a markup tag that tells the web browser how to show on a page in Mozilla Firefox or Google Chrome. We can write html file as htm or html.<\/p>\n\n\n\n

Most used tags in HTML<\/h2>\n\n\n\n

<html><\/strong> – The HTML<\/strong> element is the root element of an HTML<\/strong> page.<\/p>\n\n\n\n

<head><\/strong> – Element in HTML<\/strong> is used to define the head portion of an HTML<\/strong> document that contains the document related information.<\/p>\n\n\n\n

<title><\/strong> – The element specifies a title for the HTML<\/strong> page that is displayed in the title bar of the browser.<\/p>\n\n\n\n

<body><\/strong> – The element defined the document body and is the container for all visible contents such as paragraphs, tables, hyperlinks, tables, lists, etc.<\/p>\n\n\n\n

Underline – Use the underline tag to \u2013 you guessed it \u2013 underline text: <u><\/strong>Underlined text<\/u><\/strong><\/p>\n\n\n\n

Underlining the text of a page can be useful for emphasis, but underlining on the web is often used to indicate a link.<\/p>\n\n\n\n

Headings:<\/h3>\n\n\n\n

Use the h1, h2, h3, h4, h5, and h6 tags to include titles. Headings typically have rules in your WordPress theme stylesheet that determine how titles are displayed for your site.<\/p>\n\n\n\n

The heading above is a Level 3 Heading:<\/strong><\/p>\n\n\n

<h1<\/span>><\/span>Level 1 Heading<\/h1<\/span>><\/span>\n<h2<\/span>><\/span>Level 2 Heading<\/h2<\/span>><\/span>\n<h3<\/span>><\/span>Level 3 Heading<\/h3<\/span>><\/span>\n<h4<\/span>><\/span>Level 4 Heading<\/h4<\/span>><\/span>\n<h5<\/span>><\/span>Level 5 Heading<\/h5<\/span>><\/span>\n<h6<\/span>><\/span>Level 6 Heading<\/h6<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Paragraph:-<\/h3>\n\n\n\n
Text between<\/p>\n\n\n\n
<p><\/strong> – text between <p><\/strong> tag describes the paragraph of the webpage.<\/p>\n\n\n\n
<p><\/strong>This is a paragraph.<\/p><\/strong><\/p>\n\n\n\n
<p><\/strong>This is another paragraph.<\/p><\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bold Tags:<\/h3>\n\n\n\n
Bold: Regularly Use the tag and to bold text in HTML<\/strong>. Ex:<\/p>\n\n\n\n
<b>DevOpsSchool<\/strong>(Bold Text)<\/b><\/strong>
<strong>Bolded text<\/strong>(Bolded Text)<\/strong><\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Italics:<\/h3>\n\n\n\n
Regularly Use the tag and to italicise text in HTML<\/strong>.<\/p>\n\n\n\n
<i><\/strong>Italic Text<\/em><\/i><\/strong>
<em><\/strong>Italicised text<\/em><\/em><\/strong><\/p>\n\n\n\n
Bullets and Numbered Lists<\/h3>\n\n\n\n
Bulleted = unordered list
Numbered = ordered list<\/p>\n\n\n\n
To create a list directly using HTML<\/strong>, you need to know that each type of list uses ul or ol tags.<\/p>\n\n\n\n
Then, each line item in the list uses the Lee tag.<\/p>\n\n\n\n
Here is a list of two bulleted items:<\/p>\n\n\n\n
First item
Second item<\/strong><\/p>\n\n\n\n
Here is the HTML<\/strong> to create this bulleted list.<\/p>\n\n\n
<ul<\/span>><\/span>\n<li<\/span>><\/span>First item<\/li<\/span>><\/span>\n<li<\/span>><\/span>Second item<\/li<\/span>><\/span>\n<\/ul<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To change the bullets to numbers, just use the ol tag instead of the ul<\/strong> tag:<\/p>\n\n\n\n
First item
Second item<\/strong><\/p>\n\n\n
<ol<\/span>><\/span>\n<li<\/span>><\/span>First item<\/li<\/span>><\/span>\n<li<\/span>><\/span>Second item<\/li<\/span>><\/span>\n<\/ol<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
HTML Links<\/strong><\/h3>\n\n\n\n
HTML links defined <a><\/strong> Tags<\/p>\n\n\n\n
Examples:<\/p>\n\n\n
<a<\/span> herf<\/span>=\"https:\/\/www.devopsschool.com\"<\/span>><\/span> is a link <\/a<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The destination of the link is specified in the href attribute<\/p>\n\n\n\n
Attributes are used to provide additional information about HTML elements.<\/p>\n\n\n\n
HTML Images Tag<\/h3>\n\n\n\n
HTML images are defined with the <img> <\/strong> tag.<\/p>\n\n\n\n
The source file (src), providing optional text (height), width, and height as a feature:<\/p>\n\n\n
<img<\/span> scr<\/span>=\"google.jpg\"<\/span> alt<\/span>=\"google.com\"<\/span> width<\/span>=\"100\"<\/span> height<\/span>=\"140\"<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Tables Tag<\/h3>\n\n\n\n

<table><\/strong> – Let’s use the table tag to create a table in HTML<\/strong>.<\/p>\n\n\n\n
<th> – <th> <\/strong>tag is used to create columns in the table.<\/p>\n\n\n\n
<tr> – <tr> <\/strong>tags are used to create a row in the table.<\/p>\n\n\n\n
<td> –<\/strong> The <td> <\/strong>tag is used to insert data into columns in the table.<\/p>\n\n\n
<table<\/span> border<\/span>=1<\/span>><\/span>\n\t<th<\/span>><\/span>Name<\/th<\/span>><\/span>\n\t<th<\/span>><\/span>Roll<\/th<\/span>><\/span>\n\t<th<\/span>><\/span>Result<\/th<\/span>><\/span>\n    <tr<\/span>><\/span>\n        <td<\/span>><\/span>Day<\/td<\/span>><\/span>\n        <td<\/span>><\/span>Mission<\/td<\/span>><\/span>\n\t<td<\/span>><\/span>1<\/td<\/span>><\/span>\n    <\/tr<\/span>><\/span>\n    <tr<\/span>><\/span>\n        <td<\/span>><\/span>Saturday<\/td<\/span>><\/span>\n        <td<\/span>><\/span>Walk Dog<\/td<\/span>><\/span>\n\t<td<\/span>><\/span>2<\/td<\/span>><\/span>\n    <\/tr<\/span>><\/span>\n    <tr<\/span>><\/span>\n        <td<\/span>><\/span>Sunday<\/td<\/span>><\/span>\n        <td<\/span>><\/span>Walk Cat<\/td<\/span>><\/span>\n\t<td<\/span>><\/span>3<\/td<\/span>><\/span>\n    <\/tr<\/span>><\/span>\n<\/table<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Where you can use HTML:<\/h4>\n\n\n\n
Would you like to use images as buttons to link to other pages? Include tables on your website? HTML<\/strong> lets you do these things.<\/p>\n\n\n\n
In any languages PHP, laravel, python, angular js\u2026 etc the most common places you might want to use HTML<\/strong> tags for frontend:<\/p>\n\n\n\n
In posts and pages
In sidebar text widgets
In paragraph
In Table
In Popup\u2026etc<\/p>\n\n\n
<script<\/span> src<\/span>=\"https:\/\/gist.github.com\/ajcotocus\/47129f5e77691a599db948645b00576b.js\"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
HTML Introduction HTML is a markup language that is used to make attractive web pages with the help of styling, which looks like a good format on… <\/p>\n","protected":false},"author":1,"featured_media":20155,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[4864],"tags":[5877,4459,5810,5091,5879],"class_list":["post-20147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-body-tag","tag-html","tag-html-tag","tag-image","tag-paragraph"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=20147"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20147\/revisions"}],"predecessor-version":[{"id":20161,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20147\/revisions\/20161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/20155"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=20147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=20147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=20147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}