Scribd
Upload
15 views

HTML

Front-end development involves three main components: HTML for content structure and layout, CSS for styling, and JavaScript for logic and interactivity. HTML uses tags to structure content into headings, paragraphs, lists, images, and more. It is not case sensitive. Forms allow users to enter data using input elements like text fields, checkboxes, radio buttons and selects. CSS can be used to style HTML elements with properties for color, font, size and more. JavaScript adds dynamic and interactive behaviors to web pages.

Uploaded by

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

HTML

Front-end development involves three main components: HTML for content structure and layout, CSS for styling, and JavaScript for logic and interactivity. HTML uses tags to structure content into headings, paragraphs, lists, images, and more. It is not case sensitive. Forms allow users to enter data using input elements like text fields, checkboxes, radio buttons and selects. CSS can be used to style HTML elements with properties for color, font, size and more. JavaScript adds dynamic and interactive behaviors to web pages.

Uploaded by

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

Front-end Development

HTML CSS JS

Structure/Layout Style Logic


HTML

Hyper Text Markup Language

HTML is the code that is used to structure a web page and its
content.

The components used to design the structure of websites are called


HTML tags.
First HTML File

index.html

It is the default name for a website's homepage


HTML Tag
A container for some content or other HTML tags

Opening Tag Closing Tag

<p> This is a paragraph </p>

Content

Element
Basic HTML Page
<!DOCTYPE html> tells browser you are using HTML5

<html> root of an html document

<head> container for metadata


<title>My First Page</title> page title
</head>
<body> contains all data rendered by the browser
<p>hello world</p> paragraph tag

</body>
</html>
Quick Points

HTML tag is the parent of the head & and body tag

Most of HTML elements have opening & and closing tags with
content in between

Some tags have no content in between, eg - <br>

We can use inspect element/view page source to edit homeland


Comments in HTML

This is part of code that should not be parsed.

<!-- This is an HTML Comment -->


HTML is NOT Case Sensitive

<html> = <HTML>

<p> = <P>

<head> = <HEAD>

<body> = <BODY>
Basic HTML Tags

HTML Attributes
Attributes are used to add more information to the tag

<html lang="en">
Heading Tag
Used to display headings in HTML

h1 (most important)

h2
h3
h4
h5
h6 (least important)
Paragraph Tag

Used to add paragraphs in HTML

<p> This is a sample paragraph </p>


Anchor Tag

Used to add links to your page

<a href="https://google.com"> Google </a>


Image Tag

Used to add images to your page

<img src="/image.png" alt="Random Image“/>


Br Tag

Used to add next line (line breaks) to your page

<br>
Bold, Italic & Underline Tags

Used to highlight text on your page

<b> Bold </b>

<i> Italic </i>

<u> Underline </u>


Big & Small Tags

Used to display big and small text on your page

<big> Big </big>

<small> Small </small>


Hr Tag

Used to display a horizontal ruler, used to separate content

<hr>
Subscript & Superscript Tag

Used to display a horizontal ruler, used to separate content

<sub> subscript </sub>

H2O
<sup> superscript </sup>
n
A +B
Pre Tag

Used to display text as it is (without ignoring spaces & next line)

<pre> This
is a sample
text.
</pre>
Page Layout Techniques

Using Semantic tags for layout


using the Right Tags

<header>
<main>
<footer>
Inside Main Tag

Section Tag For a section on your page


<section>

Article Tag For an article on your page


<article>

Aside Tag For content aside main content(ads)


<aside>
Revisiting Anchor Tag
<a href="https://google.com" target="blank"> Google </a>

for new tab

<a href="https://google.com"> <img src="link"> </a>

clickable pic
Revisiting Image Tag
<img src="link" height=50px >

set height

<img src="link" width=50px >

set width
Div Tag

Div is a container used for other HTML elements

Block Element (takes full width)


List : Div Tags
<address> <fieldset> <nav>
<article> <figcaption> <noscript>
<aside> <figure> <ol>
<blockquote> <footer> <p>
<canvas> <form> <pre>
<dd> <h1>-<h6> <section>
<div> <header> <table>
<dl> <hr> <tfoot>
<dt> <li> <ul>
<main> <video>
Span Tag

Span is also a container used for other HTML elements

Inline Element (takes width as per size)


List : Span Tags

<a> <code> <object> <span>


<abbr> <dfn> <tt> <strong>
<acronym> <em> <var> <sub>
<b> <i> <output> <sup>
<bdo> <img> <q> <textarea>
<big> <input> <samp> <time>
<br> <kbd> <script>
<button> <label> <select>
<cite> <map> <small>
List in HTML
Lists are used to represent real life list data.real-life

unordered ordered

<ul> <ol>
<li> Apple </li> <li> Apple </li>
<li> Mango </li> <li> Mango </li>
</ul> </ol>
Tables in HTML

Tables are used to represent real life table data.

<tr> used to display table row


<td> used to display table data
<th> used to display table header
Tables in HTML
<table>
<tr> Name Roll No
<th> Name </t h > 1639
Pankaj
<th> Roll No </t h >
</tr>
<tr>
<td> Pankaj </t h >
<th> 1639 </t h >
</tr>
</table>
Caption in Tables

<caption> Student Data </caption>

Student Data
Name Roll No
Pankaj 1639
thead & tbody in Tables

<thead> to wrap table head


<tbody> to wrap table body
Colspan Attribute

colspan="n"
used to create cells that span over multiple columns

Data
Pankaj 1639

Deepesh 1890
Form in HTML

Forms are used to collect data from the user

Eg- sign up/login/help requests/contact me

<form>

form content

</form>
Action in Form

Action attribute is used to define what action needs to be


performed when a form is submitted

<form action="/action.php" >


Form Element : Input

<input type="text" placeholder="Enter Name">


Label
<label for="id1">

<input type="radio" value="class X" name="class" id="id1">

</label>

<label for="id2">

<input type="radio" value="class X" name="class" id="id2">

</label>
Class & Id
<div id="id1" class="group1">

</div>

<div id="id2"> class="group1">

</div>
Checkbox
<label for="id1">

<input type="checkbox" value="class X" name="class"


id="id1"
>

</label>

<label for="id2">

<input type="checkbox" value="class X" name="class"


id="id2"
>
Textarea

<textarea name="feedback" id="feedback" placeholder="Please add


Feedback">

</textarea>
Select
<select name="city" id="city">

<option value="Delhi"> Delhi </option>

<option value="Mumbai"> Delhi </option>

<option value="Banglore"> Delhi </option>

</select>
iframe Tag

website inside website

<iframe src="link"> Link </option>


Video Tag

<video src="myVid.mp4"> My Video </video>

Attributes

• controls
• height
• width
• loop
• autoplay

You might also like