first road to html
hello everyone , in this articles we learn about all basic to advanced html tags attributes , elements , styling and so on ! if you’re beginner or just start learning html this will help you ,
learning comes when we try it all by ourselves, hence try everything on your desktop too !
so lets gets started !
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn, You will enjoy it!
structure of html —
<!DOCTYPE html> (this is not a case sensitive)
<html>
<title> your title </title>
<body>
<h1> your web page heading </h1>
<p> this is paragraph</p>
</body>
</html>
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 )
now we move further !
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:
<h1>My First Heading</h1>
<p>My first paragraph.</p> (paragraph tag , you can use as many paragraph tag ,as you need)
<br> (it doesn’t have close tag! this is like break line )
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
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.
The value of the title attribute will be displayed as a tooltip when you mouse over the 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>h2>h3>h4>h5>h6>
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;”>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
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>
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>
note: “when you try all this example in your text-editor , take h1 and p in body element and
it will only work when you wrote it on html structure don’t write it directly “
now last and final topic of this tutorial ! i might not bored you enough !
HTML Comments
comments are not display on our main web page it is used to
example our code
in html we use <! — comment →
I hope you find this tutorial helpful ! html is one of the fine language you can easily learn & enjoy !
you can follow me for more articles like this !on twitter @pranshi7tech
happy learning !
