Full stack accelerator program
Week 1: HTML Basics
HTML playlist(Telugu)
Html playlist(English)
Html Playlist 2(English)
Day 1: Introduction to HTML
HTML Introduction
Learn basic HTML structure: <!DOCTYPE html>, <html>, <head>, <title>, <body> ,
comments.
HTML elements: headings, paragraphs.
Create a simple webpage with text, add icon add page title.
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
1
HTML Page Title
Every web page should have a page title to describe the meaning of the page.
The <title> element adds a title to your page:
HTML Comments
HTML comments are not displayed in the browser, but they can help document your
HTML source code.
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.
To add a favicon to your website, either save your favicon image to the root directory
of your webserver, or create a folder in the root directory called images, and save your
favicon image in this folder. A common name for a favicon image is "favicon.ico".
Day 2: More HTML Element
Explore additional HTML elements: links, images.
Formatting tags in HTML
Exploring html attributes, classes, id.(Important)
Learn about tables: structure, headers, rows, and cells.
Practice creating a webpage with diverse elements.
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
HTML Links - The target Attribute
2
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax: <img src="url" alt="alternatetext">
The required src attribute specifies the path (URL) to the image.
The required alt attribute provides an alternate text for an image, if the user
for some reason cannot view it (because of slow connection, an error in the
src attribute, or if the user uses a screen reader).
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML Attributes
3
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
<a href="https://www.w3schools.com">Visit W3Schools</a>
The src attribute of <img> specifies the path to the image to be displayed
<img src="img_girl.jpg">
The width and height attributes of <img> provide size information for images
<img src="img_girl.jpg" width="500" height="600">
The alt attribute of <img> provides an alternate text for an image
<img src="img_girl.jpg" alt="Girl with a jacket">
The style attribute is used to add styles to an element, such as color, font, size, and
more
<p style="color:red;">This is a red paragraph.</p>
The lang attribute of the <html> tag declares the language of the Web page
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
The title attribute defines some extra information about an element
<p title="I'm a tooltip">This is a paragraph.</p>
HTML class Attribute
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
The HTML class attribute specifies one or more class names for an element
Classes are used by CSS and JavaScript to select and access specific elements
The class attribute can be used on any HTML element
The class name is case sensitive
Different HTML elements can point to the same class name
JavaScript can access elements with a specific class name with the
getElementsByClassName() method
4
HTML id Attribute
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
The id attribute specifies a unique id for an HTML element. The value of the id
attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet. It is also
used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define
the CSS properties within curly braces {}.
Difference Between Class and ID - A class name can be used by multiple HTML
elements, while an id name must only be used by one HTML element within the page.
The id attribute is used to specify a unique id for an HTML element
The value of the id attribute must be unique within the HTML document
The id attribute is used by CSS and JavaScript to style/select a specific element
The value of the id attribute is case sensitive
The id attribute is also used to create HTML bookmarks
JavaScript can access an element with a specific id with the getElementById() method
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Sometimes you want your cells to be table header cells. In those cases use the <th>
tag instead of the <td> tag:
5
th stands for table header.
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Day 3:Forms
Forms (youtube reference)
Non semantic(youtube reference)
Dive into HTML forms: text fields, radio buttons, checkboxes.
Explore non-semantic elements
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
form elements
</form>
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
6
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input Displays a checkbox (for selecting zero or more of many choices)
type="checkbox">
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
The HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
a) The <input> Element
One of the most used form elements is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
b) The <label> Element
The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such
as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.
7
c) The <select> Element
The <select> element defines a drop-down list:
The <option> element defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Visible Values:
Use the size attribute to specify the number of visible values:
Allow Multiple Selections:
8
Use the multiple attribute to allow the user to select more than one value:
d) The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
e) The <button> Element
The <button> element defines a clickable button:
f) The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
9
g) The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist>
element.
h) The <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
HTML Input Types
Here are the different input types you can use in HTML:
a) Input Type Text
10
<input type="text"> defines a single-line text input field:
b) Input Type Password
<input type="password"> defines a password field:
c) Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
d) Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default
values:
11
e) Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
f) Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
g) Input Type Button
<input type="button"> defines a button:
12
h) Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
i) Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
j) Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.
13
k) Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email
input.
l) Input Type Image
The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.
m) Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
14
n) Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not
important (like a slider control). Default range is 0 to 100. However, you can set restrictions
on what numbers are accepted with the min, max, and step attributes:
o) Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text
field).
p) Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
q) Input Type Time
15
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
r) Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url
input.
s) Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
HTML Div Element
16
The <div> Element
The <div> element is by default a block element, meaning that it takes all available width,
and comes with line breaks before and after.
<div> as a container
The <div> element is often used to group sections of a web page together.
Center align a <div> element
If you have a <div> element that is not 100% wide, and you want to center-align it, set the
CSS margin property to auto.
Multiple <div> elements
You can have many <div> containers on the same page.
Aligning <div> elements side by side
There are different methods for aligning elements side by side, all include some CSS styling.
We will look at the most common methods:
Float
The CSS float property was not originally meant to align <div> elements side-by-side, but
has been used for this purpose for many years.
The CSS float property is used for positioning and formatting content and allow elements
float next to each other instead of on top of each other.
Inline-block
If you change the <div> element's display property from block to inline-block, the <div>
elements will no longer add a line break before and after, and will be displayed side by side
instead of on top of each other.
Flex
The CSS Flexbox Layout Module was introduced to make it easier to design flexible
responsive layout structure without using float or positioning.
To make the CSS flex method work, surround the <div> elements with another <div>
element and give it the status as a flex container.
Grid
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns,
making it easier to design web pages without having to use floats and positioning.
Sounds almost the same as flex, but has the ability to define more than one row and position
each row individually.
The CSS grid method requires that you surround the <div> elements with another <div>
element and give the status as a grid container, and you must specify the width of each
column.
17
18
