Anany sharma
5 min readOct 22, 2020

--

HTML INTRODUCTION

HII! here is ANANY SHARMA. Today we learn about HTML Follow my page for latest updates.

Who invented HTML?

The first version of HTML was written by Tim Berners-Lee in 1993.He is a Professional Fellow of Computer Science at the University of Oxford and a professor at the Massachusetts Institute of Technology. In 1989, Tim Berners-Lee invented the World Wide Web, an Internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. Now He is a founder and president of the Open Data Institute and is currently an advisor at social network MeWe.He was knighted by Queen Elizabeth II in the 2004 New Year Honours "for services to the global development of the internet"

HTML is the standard markup language for creating Web pages or electronic pages

What is HTML?

1- HTML stands for Hyper Text Markup Language.

2- HTML is used to create a websites

3-HTML is a series of small short codes.

4- This language is typed into a text file by the author.

A SIMPLE HTML DOCUMENT

<!DOCTYPE html> (Defines the version of HTML)
<html>
<head>(This is a container for metadata and is placed between the html tag and the body tag)
<title>MY FIRST WEBPAGE</title> (It defines the title of webpage)
</head>
<body>( This element contains all the contents of an htmldocument, such as headings, paragraphs, images, hyperlinks etc.)
<p> first paragraph.</p> (They print simple text on the browser.)

</body>
</html>

Block digram of HTML

What are the different types of HTML tags?

There are two different types of HTML tags.

— — — — — — — paired tags — — — — -

— — — — — — -unpaired tags — — — —

1-PAIRED TAGS

A paired tag consist of two tags, first one is an opening tag and the second one is a closing tag.

SOME EXAMPLES OF PAIRED TAGS — —

<u> UNDERLINE TEXT </u>

<p> PARAGRAPH </p>

<h1> heading tag </h1>

<b> BOLD TAG </b>

<marquee> use for scrolling </marquee>

2- UNPAIRED TAGS

If any html tag has both opening and closing tag in a single tag,then this type of html tag is known as unpaired tag.

  • <!DOCTYPE>
  • <br>
  • <hr>
  • <meta>
  • <input>

NOTE - FOR MORE DETAILS VISIT MY YOUTUBE CHANNEL “WIZARDING CODES”

https://youtu.be/-FzV6a_OlHw

SUBSCRIBE WIZARDING CODES

PRINT HELLO WORLD WITH HTML

<!DOCTYPE html>
<html>
<head>
<title> first page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HOW CAN I RUN HTML CODES ?

Write HTML code into a basic text editor. As you become a more proficient coder, you can use HTML editing programs like Sublime,Sublime3,Adobe Dreamweaver Notepad++, but a simple program is all you need to start.

For Mac (TEXT EDIT)

For Windows(NOTEPAD)

2- Save the file on your computer.

3-Name the file “MY first webpage.HTML (.HTML is must).

4-Open the HTML file in your browser.

THE RESULT WILL LOOK MUCH LIKE THIS — —

Browser Result

Why is CSS important for HTML

CSS (Cascading style sheets) is the language for describing the presentation of Web pages, including layout,colors,background,image etc.it allows web designers to make our website unique and responsive.

WHO INVENTED CSS ?

CSS was first proposed by Hakon Wium Lie on 10 October1994. At the time, Lie was working with TIM BERNERS-LEE. In 1995, he worked on the CSS specifications, including CSS1 and CSS2. Håkon Wium Lie attended ostfold University College, West Georgia College, and MIT Media Lab, receiving an MS in Visual Studies in 1991.He has worked for, among others, the W3C, INRIA, CERN, MIT Media Lab, and Norwegian Telecom research in Televerket

Hakon Wium lie

HOW CAN WE LINK HTML FILE TO CSS ?

Styles can be linking to an HTML document using three methods

1- Inline style (attributes)

2- Embedded style

3- External style

Inline style

Inline style is the simplest method of adding CSS styles to your HTML pages. An inline style is applied to an HTML document by style attribute to specific tags.

FOR EXAMPLE — —

<!DOCTYPE html>
<html>
<head>
<title> first page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p style=”color: #0000FF”>…<p>This is a paragraph.</p> (Inline Style applied on this line)

</body>
</html>

External Style

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head>section of each .

FOR EXAMPLE — — -

HTML document — -

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>

<h4>colorfull heading</h4>
<p>colorfull Paragraph.</p>

</body>
</html>

CSS Document — —

body {
background-color: red;
}
h7 {
color: green;
}
p {
color: orange;
}

NOTE — FOR MORE DETAILS VISIT MY YOUTUBE CHANNEL “WIZARDING CODES”

https://youtu.be/-FzV6a_OlHw

SUBSCRIBE WIZARDING CODES

QUOTES

1- “Everyone should learn how to code ,it teaches you how to think” — -steve jobs(1955–2011)

2- Codes can’t lie.

--

--

Anany sharma

Security used to be an inconvenience sometimes, but now it’s a necessity all the time. — Martina Navratilova.