HTML Tutorials

If you're new to web design / development & don't know where to start,
HTML is the perfect place. HTML and CSS together form the building blocks

Home

HTML Introduction

Prerequisite
Nothing

Home
What We'll Cover
  • what is HTML
  • Structure Of a HTML document
  • HTML Editing Software
  • How Create a webpage
  • Text, Links , Lists and image
  • Various other HTML tags
  • Adding CSS to webpage
  • Adding Javascript To WebPage

What is HTML?


Home
  • Hypertext Markup Language
  • it's not a programming language
  • it's a markup language and the
  • HTML is just a way of presenting content
  • with CSS and JavaScript you can create some top looking websites

Home
HTML Tags
<p> Paragraph Text</p>
<a> Link to another Page</a>
<h1> Heading</h1>
<img>

Sample HTML - inspection (CTL + SHIFT + i)

HTML CSS JavaScript
Home

HTML Syntax & Structure

HTML Syntax
HTML is Markup Language
We use tags <> to mark content up
Example
<h1> This is header </h1>

Exercise 1

write a paragraph wih p tag in any editor and save it test.html
and open it in browser

Exercise 2

write a text in header tag h1 in any editor and save it test.html
and open it in browser

Attribute

please write following text in editor and open it via browser

<h1 class="myclass" style="color:red;"> this is Sample header </h1>

Nest text in tag for example emphasizing or strong text

<h1> this is Sample <em>header</em> </h1>
<p> this is Sample <strong>header</strong></p>

Indenting

<div>
    <div>
        <div>
            <a href="/">home</a>
        </div>
    </div>
</div>
HTML CSS JavaScript

Your First Web Page

Choice a Editor (Visual Studio,Atom,WebStorm,Sublime,Bracket,....)

Create a file with .html extention

HTML document is very much like a sandwich has got two pieces of bread (2 tag)

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
    <h1>My First Web Page</h1>
    <p>Hope you like my website</p>
    
</body>
</html>

Head and Body Tag

Head and Body tags

  • The <head/> tag contains all 'extra' information about a web page
* Meta Data, CSS & JavaScript references
  • the <body/> contains all visual content
Heading, images,paragraph etc

Go to code

06 - Headings and Text 8:19

07 - Heading Structure 5:48

08 - Default Browser Styles 3:41

09 - The img Tag 6:13

10 - HTML Links 12:25

11 - HTML Lists 8:06

12 - HR and BR Tags 3:26

13 - The div Tag 4:52

14 - ID's and Classes 8:14

15 - Adding CSS to HTML 9:34

16 - Adding JavaScript to HTML 9:42

17 - What To Do Next

<!DOCTYPE html>
<html>

<head>
    <title>An HTML standard template</title>
    <meta charset="utf-8"  />
</head>

<body>

     <p>… Your HTML content here …</p>

</body>
</html>