Tutorial-BootStrap

HTML

Introduction to VSCode

Before we start

Let look at the survey results to see what skills you already have

What is HTML

HTML stands for Hyper Text markup language A Markup language basically annotates the text so that the computer can manipulate that text.

When a browser (IE,Chrome,Firefox) displays a webpage, it reads the contents and interprets the HTML.

HTML is a set of pre-defined elements or tags that tell browser what content to display and how to display that content.

HTML (Hypertext Markup Language) is the basic language that websites are built in. It’s right underneath the surface of everything you see on the web and you can uncover it with a couple quick steps. Try this:

TAGS

Tag Example

Elements

<p>this is a paragraph element</p>

Above is a paragraph element. The text content inside the P tag is formatted as a paragraph when dispalyed on the browser

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Above are list of various header elements.

Empty Elements

Elements usually have a start and closing tag, like <p></p>. But there are some elements which dont have closing tag, this type of tags are called Empty tags

<br />
<input />
<hr />

Structure of HTML Page

<!DOCTYPE html>
<html>
  <!--THIS IS THE HEAD SECTION -->

  <head>
    <title>Document</title>
  </head>

  <!-- THIS IS THE BODY SECTION-->

  <body></body>
</html>

Commenting HTML Code

A comment starts with the tag <!-- and ends with tag -->. Whatever content is added inside a comment tag is never displayed in the browser.

Summary

Lesson 2 : Attributes & Tags with attributes

Attributes

Image Tag

The HTML element embeds an image into the document.

<img src="http://www.itsgoa.com/wp-content/uploads/2017/05/Goa-tourism-780x405.jpg" alt="Goa Tourism" />

The HTML tag is used to define a hyperlink

<a href="https://en.wikipedia.org/wiki/HTML">Wiki Link: HTML </a>

Web Standards

Validate if your webpage is well formed using the below url https://validator.w3.org/nu/#file

Lesson 3 : Demo 1

Convert the text file to a HTML document

Lesson 4 :HTML Block and Inline Elements

Block Elelements

Block element always starts on a new line and takes up the full width available.

Example:

<div>Hello HTML</div>
<article> i am a important text </article>

Inline Elements

An Inline element does not start on a new line and takes up as much width as necessary

Example:

<span>Hello HTML</span>
<strong> i am a important text </strong>

Lesson 5: Other HTML Elements

Lists

Unordered lists

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>four</li>
  <li>five</li>
</ul>

Ordered lists

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>four</li>
  <li>five</li>
</ol>

Tables

    <table style="width:100%">
        <tr style="text-align: left">
            <th>Name</th>
            <th>Degree</th>
            <th>Year</th>
        </tr>
        <tr>
            <td>Student Name</td>
            <td>Course Name</td>
            <td>Semester</td>
        </tr>

Quotations

    <blockquote>
      <p>This is a blockquote</p>
    </blockquote>

Lesson 6 : Demo 2

Convert the text file to a HTML document

Lesson 7: Styles

Quiz

References for Further Learning

This site is open source. Improve this page.