Posts

Showing posts with the label Html-5 Tutorial

Lists in HTML

Image
What is List? List is a group of items related to each other. Typed of list in htmlUnordered listOrdered listDefination list Unordered V/S Ordered List
Unordered listUnordered list is a group of related items arrange in no order.Order list is created by using <ul> </ul> tag.<li> </li> tag is used to create list items in the list. Creating Unordered List <ul>
       <li>Tea</li>
       <li>Coffee</li>
       <li>Cold Drink</li>
</ul>

Types of Unordered ListOrdered ListOrdered list is a group of elements a particular order.<ol> </ol> tag is used to create ordered list.<ol>
     <li>Tea</li>
     <li>Coffee</li>
     <li>Cold Drink</li>
</ol>


Types of ordered list Examples of ordered list
Definition List Definition list a group of items with key (terms) and value (definition) pair.

<dl> tag is used to create definition list.<dt> tag creates definit…

Formatting in HTML

Image
What is the formatting?  Formatting means organize things for better presentation.  Formatting tags in HTML
Bold <b> V/S Strong <strong><b> Bold Text</b>
<strong> Strong Text</strong>Note:Both generates the same result but are semantically different.Strong is used to mark the important text. Italic <i> V/s Emphasize <em> <i> Italic Text </i>
<em> Emphasized Text </em>







Underline <u> v/S Insert <ins><u> Underline Text </u>
<ins> Insert Text </ins>




<strike> V/S <del><strike> Strike through text</strike>
<del> Deleted text </del>





Superscript V/S Subscript5 <sup>2</sup>
H <sub>2</sub>O








Center<center>Center aligned text</center>



Font Tag

Inline V/S Block Level Element

Image
What is Element?An element is the combination of opening tag, closing tag and text between the opening and closing tag.The following figure helps you to understand, what is an element? Types of Element in HTMLBlock level elementsInline elements Block level Element Block Level elements are those which always starts from a new line.Examples of block level elementsAll Headings (h1,  h2,  h3,  h4, h5, h6)ParagraphsLists Inline Element Inline elements are those, which don’t change the line automatically.Examples of inline elementBold (<b>Bold</b>)Italic (<i>Italic</i>) Underline (<i>Underline</i>)Links (<a>Links</a>) Watch the video

Paragraphs in HTML

Image
How to create Paragraph ?<p></p> tag is used to create a paragraph in html.Paragraph automatically change the line, and each paragraph starts with the new line.For Example, the following two lines create two paragraphs in HTML. <p>This creates first paragraph</p>
<p>This creates second paragraph</p> Attributes of paragraphAs similar to heading paragraph has an attribute align which is used to align paragraph text to left/ right/ center/ align. Example: <p align="left">This text will be align to left</p> <p align="right">This text will be align to right</p> <p align="center">This text will be align to center</p> <p align="justify">This text will be align to justify</p>




Output:  Watch the video

Headings in HTML

Image
How to create HeadingsThere are 6 tags available in HTML to create the heading.ElementOutput<h1>Level-1 Heading</h1> Level-1 Heading<h2>Level-2 Heading</h2> Level-2 Heading<h3>Level-3 Heading</h3> Level-3 Heading<h4>Level-4 Heading</h4> Level-4 Heading<h5>Level-5 Heading</h5> Level-5 Heading<h6>Level-6 Heading</h6> Level-6 Heading Attributes of Headingalign attribute can be used with all heading to align heading text left/ right/ center / justify. align = "left"align = "right"align = "center"align = "justify" Understanding Heading MAPHeading are parsed by browser in a heading map.Heading map is similar to the index shown at the beginning of any book.Heading map plays an important role in SEO so always be careful while creating the heading map.To Check that heading map of your HTML page, there is a various tool available. For example Html5 outliner in google chrome. Heading m…

Attributes in HTML

Image
What are attributes?Every HTML tag has some attribute associated with it, attributes define the specification of that tag.For example: If you are a human being, then your attributes/specifications are height, weight, age, color etc.An attribute is always written in the opening tag.An attribute is always written in name="value" pair.Attribute value always enclosed in double quotes or single quotes. Body tag Attributes?We have already learned, How to create a basic HTML page.A basic HTML page contains at least head and body tags.Body tag has various attributes associated with it, we have discussed some of them here in this article.text: This attributes used to define the text color in the body means your HTML content written in the body tag.bgcolor: This attribute is used to define the background color of the body (Web page).background: This attribute is used to add any background images of your web page. Example Let's see an HTML page example to demonstrate how attribute…

Creating your first html page

Image
HTML page structure As we have already discussed, every HTML page is divided into two section -:Head SectionBody SectionHead sectionThis is a section which is actually not visible to the users on the web page, but it helps the content how to display the content.It is used to write the title, meta, script, style etc.Body SectionThis is a section which is actually visible on the web page. Example-1 <!doctype html> <html>           <head>                       <title>My First Web page</title>           </head>          <body>                      Welcome!!! in the world of web.           </body>   </html> Example Explained: 
 <!doctype html> reprents, which html version you are using. For html-5 doctype is as written. Before html-5 doctype is too complicatd. HTML-5 simplified doctype.Every HTML page starts with <html></html> tag.Because each HTML page have head section and body section, which is represented by <hea…

Introduction to HTML

Image
HTML stands for Hypertext markup language.It is developed by Tim Berners-Lee in 1991 at W3C (World Wide Web Consortium).HTML is used to create web pages.A web page is a simple text file, that can be through the browser over the internet.A browser is a piece of software that is used to run the web page. popular browsers areGoogle ChromeMozilla FirefoxSafari by AppleMicrosoft edgeOperaThe latest version of HTML is HTML-5 before that HTML-4.01 is more popular.Web pages can be of two types.Static web pagesDynamic web pages.Static web pages are those which can't change automatically, need to change manually.For example: if you create a simple text file and write the current date. if the same file is opened after 10 days then the same date, you have written, is shown. If you want to change date then manually open the file, change the date and save the file.Dynamic web pages are those which can be changed automatically by using a program running in the background.Html is written with the…

Popular posts from this blog

Overview of Go lang

Arrays in C Language

Data Types in Go language

Creating your first html page

Say Hello world in Go lang

Arrays in Go lang

Installing go lang

String in golang

Decision Making in Go lang

Decision Making Statements