HTML -
- HTML is the standard markup language for creating Web pages.
- Tim Berners-Lee invented HTML in 1991
1) 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.
2) HTML Tags -
Syntax-
< tagname here >
3) HTML Elements -
Syntax-
<starttag> Content here... </endtag>
- The HTML element is everything from the start tag to the end tag
4) A Simple HTML Document
Syntax-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content goes here....
</body>
</html>
- For saving this file we use extension .html
i.e [Link]
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the HTML page
- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the
page's tab)
- The <body> element defines the document's body, and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
5) Folder Structure -
Main_Folder-
- assets folder -
- images folder
- css folder
- Html Pages
- Here we use notepad editor initial level. then we use VS code editor for faster development purpose
6) HTML Heading Element -
- HTML headings are titles or subtitles that you want to display on a webpage.
- HTML headings are defined with the <h1> to <h6> tags.
- <h1> defines the most important heading. <h6> defines the least important heading.
- Example -
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
- <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>,
and so on.
7) HTML Paragraph Element -
1) Paragraph Tag-
- A paragraph always starts on a new line, and is usually a block of text.
- 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.
- Example -
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
2) Horizontal Rules -
- The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal
rule.
- The <hr> element is used to separate content (or define a change) in an HTML page
3) Line Breaks -
- The HTML <br> element defines a line break.
- Use <br> if you want a line break (a new line) without starting a new paragraph
- The <br> tag is an empty tag, which means that it has no end tag.
4) Poem Problem -
- The HTML <pre> element defines preformatted text.
- The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves
both spaces and line breaks
8) HTML Attribute -
- HTML attributes provide additional information about HTML elements.
- 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"
1) href Attribute -
- The <a> tag defines a hyperlink.
- The href attribute specifies the URL of the page the link goes to
2) target Attribute -
- By default, the linked page will be displayed in the current browser window.
- 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
3) src & alt 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
- 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 a slow connection, or an error in the src attribute, or if the user uses a screen reader.
4) Use an Image as a Link -
- To use an image as a link, just put the <img> tag inside the <a> tag
5) Link to an Email Address -
- Use mailto: inside the href attribute to create a link that opens the user's email program
- Use tel: inside the href attribute to create a link that opens the user's calling.
6) Common Attributes -
1) width and height Attributes -
- The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels)
2) 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.
3) style Attribute -
- The style attribute is used to add styles to an element, such as color, font, size, and more.
9) Style Attribute -
- The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
- Setting the style of an HTML element, can be done with the style attribute.
- Syntax-
<tagname style="property:value;">
- The property is a CSS property. The value is a CSS value.
- There are major 5 properties-
- Use background-color for background color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment
10) HTML Formatting Elements -
- Formatting elements were designed to display special types of text
- <b> - Bold text
- <u> - Underline
- <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
- Some elements are working but not supported by HTML5
- <center> - all elements/content inside this elements are aligned center
- <big> - font size increased
- <strike>
11) HTML Comments -
- HTML comments are not displayed in the browser, but they can help document your HTML source code
- Syntax-
<!-- Write your comments here -->
12) HTML Colors -
- Color Names
- RGB Color Values-
Syntax-
rgb(red, green, blue)
Example -
rgb(0, 0, 0); - black color
rgb(255, 255, 255); - White Color
- HEX Color Values -
Syntax-
#rrggbb
Example -
#000000 - Black Color
#ffffff - White Color
13) HTML Tables -
- HTML tables allow web developers to arrange data into rows and columns.
- There are 4 elements -
- <table> - Parent Element
- <tr> - table rows
- <th> - table heading
- <td> - table data
- Table having 3 child elements-
- <thead> - Groups the header content in a table
- <tbody> - Groups the body content in a table
- <tfoot> - Groups the footer content in a table
- Table Border -
- HTML tables can have borders of different styles and shapes.
- Example -
table, th, td {
border: 1px solid black;
}
- Collapsed Border -
border-collapse: collapse;
- Row & Columns Merging -
- rowspan attribute
- colspan attribute
14) HTML Lists -
- HTML lists allow web developers to group a set of related items in lists.
1) Unordered HTML List -
- An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
- The list items will be marked with bullets (small black circles) by default
- Example -
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
- The CSS list-style-type property is used to define the style of the list item marker
2) Ordered HTML List -
- An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
- The list items will be marked with numbers by default
- Example -
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- The type attribute of the <ol> tag, defines the type of the list item marker ( 1, A, a, i, I)
15) HTML Block and Inline Elements -
1) Block-level Elements -
- A block-level element always starts on a new line, and the browsers automatically add some
space (a margin) before and after the element.
- A block-level element always takes up the full width available.
- Here are the block-level elements in HTML:
<address>, <article>, <aside>,
<blockquote>, <canvas>, <dd>,
<div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>,
<form>,<h1>-<h6>, <header>,
<hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <p>, <pre>, <section>,
<table>, <tfoot>,<ul>, <video>
-An Block element contain a block-level element + Inline element
- The <div> Element -
- The <div> element is often used as a container for other HTML elements.
2) Inline Elements -
- An inline element does not start on a new line.
- An inline element only takes up as much width as necessary.
- Here are the inline elements in HTML:
<a>, <abbr>, <acronym>, <b>, <bdo>,
<big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>,
<kbd>, <label>,<map>, <object>, <output>,
<q>, <samp>, <script>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <textarea>
<time>, <tt>, <var>
- An inline element cannot contain a block-level element!
- The <span> Element-
- The <span> element is an inline container used to mark up a part of a text, or a part of a
document.
3) Conversion into Block to inline & Inline to Block -
- display property & inline/block value
16) HTML Class & Id Attribute -
1) 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 class attribute is often used to point to a class name in a style sheet.
- The class attribute can be used on any HTML element.
- The class name is case sensitive!
- To create a class; write a period (.) character, followed by a class name. Then, define the CSS
properties within curly braces {}:
- Example -
.city {
text-align:center;
color:red;
}
2) 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 {}.
- The id name is case sensitive!
- The id name must contain at least one character, cannot start with a number, and must not
contain whitespaces (spaces, tabs, etc.).
- Example -
#demo {
text-align:center;
color:red;
}
17) HTML Iframes -
- An HTML iframe is used to display a web page within a web page.
- Syntax-
<iframe src="url" title="description"></iframe>
- Use the height and width attributes to specify the size of the iframe.
- To remove the border, add the style attribute and use the CSS border property:
- We can use iframe to show Youtube video & Google map also.
1) Iframe - Target for a Link-
- An iframe can be used as the target frame for a link.
- The target attribute of the link must refer to the name attribute of the iframe:
18) HTML Responsive Web Design -
- Responsive web design is about creating web pages that look good on all devices!
- A responsive web design will automatically adjust for different screen sizes and viewports.
1) Setting The Viewport-
- To create a responsive website, add the following <meta> tag to all your web pages
- Example -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) Responsive Images -
- Using the width Property-
- If the CSS width property is set to 100%, the image will be responsive and scale up and
down:
- Using the max-width Property -
- If the max-width property is set to 100%, the image will scale down if it has to, but
never scale up to be larger than its original size
3) Media Queries -
- In addition to resize text and images, it is also common to use media queries in responsive web
pages.
- With media queries you can define completely different styles for different browser sizes.
- Syntax-
@media not|only mediatype and (expressions) {
CSS-Code;
}
19) HTML Layout Elements -
- Websites often display content in multiple columns (like a magazine or a newspaper).
- HTML has several semantic elements that define the different parts of a web page:
- <header> - Defines a header for a document or a section
- <nav> - Defines a set of navigation links
- <section> - Defines a section in a document
- <article> - Defines an independent, self-contained content
- <aside> - Defines content aside from the content (like a sidebar)
- <footer> - Defines a footer for a document or a section
- <div> - Not layout elements but it is Block Element
- Single page Website Structure-
20) CSS Layouts -
1) CSS Float Layout-
- It is common to do entire web layouts using the CSS float property.
- you just need to remember how the float and clear properties work.
- There are two properties -
1) float - none/left/right
2) clear - left/right/both / none
2) CSS Flexbox Layout -
- Use of flexbox ensures that elements behave predictably when the page layout must accommodate
different screen sizes and different display devices.
- There are two properties-
1) display - for parent element
2) flex - for child element
21) HTML Forms -
- An HTML form is used to collect user input. The user input is most often sent to a server for processing.
- The HTML <form> element is used to create an HTML form for user input:
- Syntax-
<form>
form elements
</form>
1) 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.
- Example -
- <input type="button">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="reset">
- <input type="search">
- <input type="submit">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
2) The <textarea> Element -
- The <textarea> element defines a multi-line input field (a text area):
- Example -
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
- The rows attribute specifies the visible number of lines in a text area.
- The cols attribute specifies the visible width of a text area.
3) The <select> Element -
- The <select> element defines a list
- Example-
<select>
<option>--Select--</option>
<option>Pune</option>
<option>Satara</option>
<option>Kolhapur</option>
</select>
4) Multimedia -
1) Video -
- <video> Element
- src attribute & controls attribute
- Example -
<video controls src="assets/media/154586 (360p).mp4">
</video>
2) Audio -
- <audio> Element
- src attribute & controls attribute
- Example -
<audio controls src="assets/media/leonell-cassio-the-paranormal-is-real-ft-carrie-
163742.mp3"></audio>
