first road to html

source: free learning university

structure of html —

<!DOCTYPE html> (this is not a case sensitive)
<title> your title </title>
<h1> your web page heading </h1>
<p> this is paragraph</p>

here we can see the basic structure of our web page but with time we went through
some of most used attributes and element to make our web page more
interesting and efficient !
now it’s time to open your notepad or text-editor and get your hand dirty make your first heading and
write your first paragraph !
then save it ___.html or __.htm ( empty space is your file name )

HTML Elements

The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here…</tagname>

Examples of some HTML elements:

HTML Attributes

All HTML elements can have attributes
1- Attributes provide additional information about elements
2- Attributes are always specified in the start tag
3- Attributes usually come in name/value pairs like: name=”value”

<a href=”url of my artical”>Visit mywebsite</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed

source — Tech Fry

example :<img src=”img_girl.jpg”>

The alt Attribute

the required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user
uses a screen reader.

example: <img src=”img_girl.png” alt=”Girl with a hat ”>

The title Attribute

The title attribute defines some extra information about an element.

<p title=”I’m a tooltip”>This is a paragraph.</p>

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.
h1 is the most important heading in our web page ! and hence it is the biggest !
while h6 is least important hence it is smallest !

HTML Styles

this is the most important topic in html introduction in this you learn about size , color , background-color, font-family and so on!
html style attributes :

<tagname style=”property:value;”>

1- background-color :

The CSS background-color property defines the background color for an HTML element.
example : <body style=”background-color:powderblue;”>

2- Text Color :

The CSS color property defines the text color for an HTML element
<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

source : internet

3- Fonts:

The CSS font-family property defines the font to be used for an HTML element
example: <h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

4-Text Size:

he CSS font-size property defines the text size for an HTML element
example: <h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

5-Text Alignment:

The CSS text-align property defines the horizontal text alignment for an HTML element
example: <h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

HTML Comments

comments are not display on our main web page it is used to
example our code
in html we use <! — comment →



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pranshi chaturvedi

Pranshi chaturvedi

hey pals , i’m mix version of technicality and philosophy : creativity solves every problem — pranshi