Scribd
Upload
23 views

HTML 5

Html 5

Uploaded by

tharakaratnareddi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

HTML 5

Html 5

Uploaded by

tharakaratnareddi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

COMPLETE TUTORIAL ABOUT HTML

Before Going To Learn About HTML, Let’s Discuss some queries!


What does a website do?
The Main Aim of a website is to provide needed information to the user
By taking some input prompt from the user. Here input prompt means a
query raised from the user.
Example: if I need to book a ticket from Australia To India This is the
required prompt given to the website.
What does it Do?
It Understands your prompt and provides the needed information to
you.
Where Should We Give Our Prompt?
We Will usually give our prompt to the web browser. A web Browser is a
software application that provides the necessary web pages to the user.
 Why HTML?
Coming to the point I gave a prompt to the browser it understands the
prompt and gives the webpages.
This process was done through HTML (In Basic)
HTML means Hyper-Text-Markup-Language
HTML is not a programming language. It is a markup language
It is a basic standalone page for the web browsers.
It provides a visual understanding to the user of what our webpage
contains.
After Completing our HTML course our HTML Website Will Looks Very
Awkward View. Because it provides only an overview of our website

Structure of HTML 5
Before going to discuss about structure of HTML we should install a
Code Editor to run our HTML code.
Writing an HTML code in Notepad is older, but it will teach for learning
syntaxes only. After Learning Syntaxes Our Work Should Be Faster So we
will use code editors
I Recommend Install VS CODE: VS CODE DOWNLOAD
By clicking the above link, it will redirect to the vs code software
download, check your specifications for your PC and download and
install it
Sample IMAGE :

[Type here]
HTML 5 CRASH COURSE COMPLETED
After Installing VS CODE, it will appear like this, this is my VS CODE setup
so relax.
After that, you need to install LIVE SERVER extension from VS CODE
Structure of HTML 5 file:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
Hello World
</body>
</html>

Breakdown of structure:
1. < ! DOCTYPE html >
Here < is the opening tag and > is the closing tag.
DOCTYPE defines what document the file is. We are telling the browser
by writing it as a html file.
There are many versions of HTML currently we are working with HTML5
2. < html lang=”eng”> </html>
It tells the language to the web browser as English.
3. < head > </head>

[Type here]
HTML 5 CRASH COURSE COMPLETED
Every File Must contain a header, in HTML 5 head tag will play a
crucial role while we working.
4. <body> </body>
Here we will include all the content in our HTML 5 code.
Seriously What do you Mean by a tag?
It represents the different types of elements by using its attributes.
Simply an attribute means properties.
Okay, this is the basic structure of an HTML file, do we write this
structure every time? Nah Open Your VS CODE type HTML 5 and hit
enter
Sample Image :

[Type here]
HTML 5 CRASH COURSE COMPLETED
When You hit enter in your code editor it will show the wanted
structure for your file.
Lastly, the file extension of an HTML file is: filename.html
Let’s Discuss about Tags In HTML:
There Are many Tags in HTML, We Provide The most Used Tags In
HTML.
 Header Tags In HTML:
A Header Tag Provides You with The heading to the HTML file
There Are 6 header file tags concerning their font size.
Syntax: <h1>You’re Heading Here </h1>
Displaying All Header Tags:

After Saving The file just click on live server which is present in the
bottom right of VS CODE.
[Type here]
HTML 5 CRASH COURSE COMPLETED
See the webpage of our HTML code it displays all the header tags.
 Paragraphs In HTML
You have a sample paragraph to display the paragraph we need the
paragraph tag
Syntax:<p>Write Your Paragraph Here !</p>
Displaying Paragraph :

Have You Raised Any Query?


Does White Space Matter in HTML?
Nope HTML doesn’t Matter, because HTML is a Scripted Language.
 Line Break Tag
If we want to break a line in our web page we use <br> tag
Displaying Line Break :

[Type here]
HTML 5 CRASH COURSE COMPLETED
As You Observe <br> tag doesn't need any closing tag, because it is a
self-closed tag.
 Paragraph-breaking tag
We Break a line via the above tag this tag breaks a paragraph
It will represent a line on our web page
Displaying Paragraph Break :
See The Below Image.

[Type here]
HTML 5 CRASH COURSE COMPLETED
 Preformatted Tag
If you display song lyrics or a poem we won’t consider a paragraph
We use a tag called pre-formatted text
Syntax: <pre> Text </pre>
Displaying pretext:
See the image below
This was a pretext that we used for like below.

[Type here]
HTML 5 CRASH COURSE COMPLETED
 Bold, Italic, Underlined tags
Generally, we use these types of formats to highlight our text on our
web page.
<b> text here </b> used to apply bold for our text
<i> text here </i> used to apply italic for our text
<u> text here </u> used to apply underline for our text
Displaying all tags :
The Below Image Represents all the tags used to format the text.

[Type here]
HTML 5 CRASH COURSE COMPLETED
 Anchor Tag (Most Important to learn)
Anchor Tag is used to link external links in HTML. However, we have a
link to another page while working on our website, this tag creates a
link between the pages.
Syntax: <a href = “url” > Your Text </a>
Here href means hyper-text reference.
URL means uniform resource locator.
Displaying Anchor Tag :
The Below Picture will display how the anchor tag works
If we click on our text i.e., Redirect to YouTube it will open on the same
tab on our browser.
The second Picture Shows the functionality of the anchor tag in the
existing tab of the browser.

[Type here]
HTML 5 CRASH COURSE COMPLETED
Okay, Now The Question is, can we open our YouTube In A New Tab?
[Type here]
HTML 5 CRASH COURSE COMPLETED
Okay, There is an Attribute called blank we will work them on it.
Syntax: < a href = “url” target=”_blank”>Text Here </a>

See the above image YouTube Webpage was opened in a new tab.
 Image Tag
To insert an image in our webpage we use an IMG tag
By the below image, we can add an image file to our web browser.
Syntax:
<img src=”link”>
 Img tag is a self-closing tag.
See the below code snippet to understand about img tag
We added extra anchor tag to visit the image file in another website

[Type here]
HTML 5 CRASH COURSE COMPLETED
Syntax: <img src=”picture.png/jpeg”>

It is another image example to understand image tags.


[Type here]
HTML 5 CRASH COURSE COMPLETED
 List tag
In the list tag, we have two types
 Ordered list
 Unordered list
In ordered list, the list will appear in the number format
In the Unordered list, the list will appear in bullet format
List Syntax:
<li>list data</li>
Ordered List Syntax:
<ol>list data </ol>
Unordered List Syntax:
<ul>list data</ul>
Lets See the below Example:

[Type here]
HTML 5 CRASH COURSE COMPLETED
Here I used two types of lists to represent my data in the list format.
 Div Tag (Most Important to learn)
The div element has no specific meaning at all it represents its
children. It can be used with the class, lang and title attributes to
markup semantics common to a group of consecutive elements.
(Block elements)
Syntax to create a div element:
<div></div>
 We can include class attribute
 We can include id attribute
And so on we will discuss it in further classes.

See the above code.


We will discuss it in further classes.

[Type here]
HTML 5 CRASH COURSE COMPLETED
 Title tag
It is one of the tags in HTML 5
It is used to create titles for our websites.
Syntax:
<title></title>
Comments in HTML 5
Comment: it is a non-executable statement In our programming
languages.
To define a comment in HTML 5
<!—Starting the comment.
Comment
--> Ending of the comment.
Inline Elements
Element in a Element
See the below code:
It Will Represents Element in a element
By this we can organize our HTML Code Easier !

[Type here]
HTML 5 CRASH COURSE COMPLETED
CSS Style Tag And JS Script Tag
The Term CSS Means Cascade Style Sheets.
It will Make The Website beautiful it is also not a programming
language it is an extension of the markup languages to design.
We will discuss CSS Later in Class.
JS means Java Script
Java script is not equal to java programming language
It is a programming language used to make the websites more
interactive.
We use <style> tag to define CSS Properties in our HTML Code.
We use <script> tag to define JS methods in our HTML Code.

[Type here]
HTML 5 CRASH COURSE COMPLETED
See How Our Website is looking.
By right clicking in our website we can get a option called INSPECT
By this we can See our JS Code outputs.

[Type here]
HTML 5 CRASH COURSE COMPLETED
Here:
 Body refers to our HTML body.
 CSS property Syntax: property:value;
 In JS to print any message in the console we use console.log
method within the parentheses where we will place our
statements.
Internal Links:
Have You Observed On any website it contains CLICK TO THE LINK to go
to the bottom of the page!
By clicking that we can directly go to that particular topic
This is done using internal links
 First set an id to the top of the header called “top”.
 Create an anchor tag with the hyper reference called “#bottom”.
 Insert some paragraphs that make your website too long to
achieve the Internal Link Concept.
 Create another header with an id “bottom” and insert some text
 Take a div element and create an anchor tag with the
hyperreference “#top” with some text
Confused?
See This:
Click The Scroll down to go to the bottom of the page.

[Type here]
HTML 5 CRASH COURSE COMPLETED
By Clicking the back to top we will go to the top of the page
 Ignore the page breaks while adding the images it will taking new
page In the word document.

[Type here]
HTML 5 CRASH COURSE COMPLETED
Tables in html:
SNO SNAME SBRANCH
1001 SUDHEER CSE
1002 NAGA CSM
1003 SAI AIML
1004 SINGIDI CIVIL

[Type here]
HTML 5 CRASH COURSE COMPLETED
Now we can create these tables in our webpage.
We can create a table using <table> </table> tags.
<td> represents a data cell in a table.
<tr> represents a row of cells in a table.

See this this is a sample table for


3X4 Table where 3 rows and 4 columns are present.
We are used a width attribute to set it perfectly.
With the border attribute we given 1 space to every cell.
See the below output:

[Type here]
HTML 5 CRASH COURSE COMPLETED
<style>
body{
background-color: black;
color: white;
}
</style>

Here we used the CSS properties in the Head Section to make it


designed.
Classes In HTML 5
Class Will represents that grouping of changes will be done in the HTML
elements

[Type here]
HTML 5 CRASH COURSE COMPLETED
It allows the CSS and JS Properties to select and Access the particular
elements by using class selectors.
To create a class we use a div element
 Create a div element with the class Model(Say)
 Insert whatever you want in the div element.
 In the style attribute we can access the class by using dot operator
 Syntax: .className

By typing lorem and after hitting the tab we will generate a general
paragraph that is used for our purposes.
Padding means the space between the elements or simply it is a
shorthand property used to set values for the thickness of the
padding area.
We will discuss CSS properties later in the CSS Module.

[Type here]
HTML 5 CRASH COURSE COMPLETED
Introduction To Forms:
Forms are generally used in daily lives to record personal opinions or
Acknowledgement In our Professions.
Example:
We are planning to build a new restaurant in our city, we don’t have
any ideas about that. If we have a group of opinions we can pick any
best of them.
To create a form in HTML 5
Syntax:
<form action=””></form>
 Form tag represent that form on our website.
 Action Attribute will represent that to process the information to
our form using some elements…
Input Elements in Forms:
If you want to enter any text in our form we add a tag that <input>
It contains:
Syntax:
<input type=”type” value=”any_value” placeholder=”text”>
 It is a self-closing tag
 Type attribute means what the input is taking to the browser.
 Value attribute is not necessary but it will taken as default
sentence or statement to the input form.
 Place holder means the value which should be typed must and
should.
 Input field is fixed in the forms.
[Type here]
HTML 5 CRASH COURSE COMPLETED
Text Areas:
Syntax:
<textarea cols=”values” rows=”values”>Value</textarea>
 Text area is not fixed
 We can write paragraphs by using the text area.
 Cols means visible width
 Rows means visible text lines
Buttons:
It is one of the main things in the forms of HTML 5
We can create a button that will take the input
Further, we can Implement this in JS too.
Syntax:
<button type=”type of”>Text</button>
Let us create a basic form using all the above methods

[Type here]
HTML 5 CRASH COURSE COMPLETED
See all the requirements and below code:

[Type here]
HTML 5 CRASH COURSE COMPLETED
If you want to style the forms we can use class attribute to style each of
them.
Dropdown Menus In HTML 5:
Okay, we have created forms but if we want to pick only choices among
a few options drop-down menu option is the best feature to do this.
To create a dropdown menu we must create a form
After creating a form we include <select></select> tag
After that, we have to create an option list using
<option>Options</option>
It will contain a set of options
Required Attribute:
In the input field, we are placing our placeholder i.e. a sentence that
will enable us to understand to the user what particulars to be filled in
that input field.
[Type here]
HTML 5 CRASH COURSE COMPLETED
So the input field must be required to be filled.
By using the required we can't skip that option Example: Password for
Email Login. It is the basic authentication to access our mail.
See the below code:
 In the below code we assigned a value attribute to the option tag
That is disabled by default it doesn't select any option.
 we assigned a default value as select by default the first priority
will take to that option.

[Type here]
HTML 5 CRASH COURSE COMPLETED
Embeded Videos In HTML 5 (Adding Video To our website)
By sharing our videos to our website it will makes more interactive
according to our data.
To add video to our website we use a tag called <iframe></iframe>

[Type here]
HTML 5 CRASH COURSE COMPLETED
To set perfect video into our website open any of the youtube video and
click share option.
Click embeded option and copy and paste into our Iframe tag.

[Type here]
HTML 5 CRASH COURSE COMPLETED

You might also like