Lets Start With The Basics Of HTML




HELLO EVERYONE,

As you know everyone its Yogesh Bansal here, So recently we have done about the introduction to HTML. Today we start with the basics of HTML. Like:-Headings, Paragraphs, Links, Images, Lists, and many more. If there is any doubt or problem please comment it down I will be happy to hear from you.



What are the attributes of HTML?

Attributes are the modifiers of the HTML element. It modifies elements like font-size, font-color, etc.
It always declared in the start Tag

For ex:- <TAG style = "color:blue">Some Text</TAG>




 # "style" is attribute here

There are many types of attributes like href attribute, src attribute, alt attribute, target attribute, etc.


What are HTML headings?

HTML headings are the titles or subtitles that you want to show on the webpage.
There are 6 Heading Tags from <h1> to <h6>
<h1> shows the most important heading and <h6> show the least important
Headings are always bigger than the make the attention of the user on the webpage



Sample Ex:-
 <html>
<head>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>





What are Paragraphs in HTML?

A paragraph is that in which we can display most of the content on Webpage
Paragraph always starts a new line and Brower automatically adds some margin before and after paragraph.


Paragraph Tags are used



For example:- <p>this is some text which we have to show on the webpage and example of paragraphs</p>
        <p>Please support and share our blog. Here you have many things to learn</p>




HTML FORMATTING:-

Tags used to format the text that is showing on the webpage knows as text formatting.

Here are some tags:-

<strong> - Use to bold the text
<i> - Italic text
<u> - Underline text
<em> - Emphasise text
<mark> - mark text
<small> - small the text
<code> - it is used to show programming code on webpage
<pre> - it is used to show the text as it is written in html file

HTML LINKS:-

Links are hyperlinks that used to link one page with another page.
When you click on the link you jump to the next document or page

<a> - anchor tag is used to link the pages with each other. Without an anchor tag, we cannot link any page

<a href="url">Text to shown</a>

href show the address where we have to jump
Text between the <a> and </a> Shown on the webpage . This is also known as the link text.

The target attribute specifies where to open the linked document.

_blank - open linked document in new window
_self - open linked document in the same window





For ex:-
<a href="https://www.google.com" target="_blank">Click here to visit google</a>

When you click on this link we reach google.com on the same page


How to Link Images in HTML:-

Images will change the appearance of the webpage.
<img> Tag is used to showing the images on the webpage
<img> does not have the closing tag
<src> - uses to specifies the URL of the image
<alt> - attributes show to the text if the image is not showing on the webpage for some reason.



alt Attribute is used to show that it is a dog image when there is an error in showing the image

For example:-

<img src="url" alt="text">

<img src="dog.jpg" alt="This is dog image">





LISTS IN HTML:-

This is used to show a group of related items on the webpage in different cells.

There are three types of lists:-

Ordered list
Unordered list
Description list

#Ordered List:-
 It starts with <ol> and end with </ol>
 List item starts with <li> and ends with </li>
  The items get arrange in sequence of numbers:



For ex:-
                    <ol>
  <li>First</li>  
  <li>Second</li>
  <li>Third</li>
   </ol>





For creating alphabatically or other order type attribute is used < ol type="A"></ol>



For example:-

 <ol type="A">
  <li>First</li>  
  <li>Second</li>
  <li>Third</li>
   </ol>




#Unordered List:-
 It starts with <ul> and end with </ul>
 List item starts with <li> and ends with </li>
 It used to show list of items with circle dot.
You can change the default list from circle dot to any other symbol or image with a type attribute





For ex:-
<ul>
<li>unordered list 1</li>
<li>unordered list 2</li>
<li>unordered list 3</li>
<li>unordered list 4</li>
</ul>



types:-

Disc: It gives the disc type bulletin
Circle: It gives a circle bulletin
Square: It gives square bulletin
None: It gives a list with no symbol




For ex:-
<ul type="square">
<li>unordered list 1</li>
<li>unordered list 2</li>
<li>unordered list 3</li>
<li>unordered list 4</li>
</ul>



#Description List:-
  It is a list with description of each term
  This list consists of three things <dl>,<dt>,<dd>.

<dl> - Description list
<dt> - It means term or name of the list element
<dd> - specifies the description of each term





For ex:-
<dl>
<dt> Simple Programming languages</dt>
<dd> C , C++ </dd>
<dt>Advance Programming languages</dt>
<dd>Python , Java</dd>
</dl>





 FOR MORE UPDATES STAY TUNED WITH US .. WE NEED YOUR SUPPORT.. THANKS FOR READING

Comments

Post a Comment

Popular posts from this blog

Redhat Ansible Expert Session Self Reflection

What is Ansible? Ansible  is a radically simple IT automation engine that automates cloud provisioning, configuration management, application deployment, intra-service orchestration, and many other IT needs. Its very much popular and has around quarter million downloads per month. Ansible can be used for cloud provisioning, configuration management, application deployment, intra-service orchestration, and many other IT needs. Now I ll be telling you about the recent workshop that i attended details of which are given below :- Workshop : Industry Use Case on Automation Using Ansible - Demo ( Practical Implementation ) , 28th December 2020  Experts : Sreejith Anujan ( Principal Instructor , RedHat )   Arun Eapen ( Director - APAC, Service Delivery, GLS, RedHat, Asia Pacific )   🚀   Organized by :  LinuxWorld Outcomes:- * Learnt about Ansible Tower * Got to know about templates * How python environments canbe used to do things, for which there are no modules available * How to create cus
Read more

Introduction to Creating Web Apps by using Python-Django Framework

Image
About the Author Hello Everyone! Welcome to the Django Series of Website Development on The Coding Cloud . My Name is Pawan Kumar and I am Pursuing B.Tech in Computer Science Engineering at Baba Farid College of Engineering and Technology. I have 1 Year Experience Working with Django and I have Worked on Several Projects. The Main Motive behind Starting this Series is to help You All Learn Django and Improve My Skills as I Will also have to Discover More for You People to Learn, as they say Learning by Teaching. This Series will be a Project based Learning because even I get bored of Only Theory as Hands on Practice Matters the Most. So, I Will be Your Instructor throughout the Series and If You have any Query, Suggestion, Feedback or You Feel any Scope of Improvement, You can Comment below and I Would Love to hear from You All. What is Django Django is a Powerful Python Web Framework which is Easy to Learn and handles most of the things Like Security, Backend all by itself withou
Read more

Setting up a Virtual Development Environment for Django3

Image
Goal: A Professional Quality Development Environment If you already have Django 3.x installed in your system, then you can skip this post but if it's not, then don't worry we will get everything up and running in the next few minutes. To install django, you need to have Python 3.x running in your System. To install python in your system, you can check official website of python To confirm whether you have python installed in your system or not, just type python in your shell and you should see the shell of python3.8.x Creating an isolated Python environment After you have Python3.x running in your system, We will now create a virtual environment which won't have anything installed except the python and we will use this to work on our django projects. Using virtual environments helps us to separate different package versions for different projects. Also if you are in multi user OS, then you won't need any permissions to install anything and work on your project.
Read more