Introduction to html5 and css3

Introduction to
<HTML5> && CSS3{}

What is HTML?
● Hyper Text Markup Language
● A standardized way of tagging text files on world wide web
● HTML elements are represented by tags
● Browsers do not display the HTML tags, but use them to render the content of
the page

Demo HTML
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Welcome to Mindfire</p>
</body>
</html>

How browser interprets
● Constructs the Object Model (DOMs)
Deep into Object Model Construction
● Constructs the render tree
Deep into Render-tree Construction
● Paints the layout in browser window

Document Object Model (DOM)
● The DOM is a W3C (World Wide Web Consortium) standard for accessing
document
● A Programming interface so that programs can change the document structure
● Object oriented representation of the document
● Each tag/markup is treated as nodes in DOM tree

HTML Tags/Elements
● <tagname>Content goes here...</tagname> - Has start and end tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
● Empty Elements - Doesn’t have end
<br>
<img src="img.png" alt="img">

HTML Tags/Elements (Cont.)
● meta - Metadata about the HTML document - machine parseable but not
displayed in the browser
More
● style - To include styles (CSS)
<style>
h1 {color:red;}
p {color:blue;}
</style>
● script - To include scripts
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

HTML Attributes
● Attributes provide additional information about an element
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"
● An HTML element can have multiple attributes
Ex:
<img src="img.png" alt="img">
<div id="div1" class="heading">Hello</div>

HTML Attributes (Cont.)
● id - Defines an id to a element unique to the document
● class - To group few elements togather
● data - Used to store custom data private to the page
Ex:
<div id=”div1” class=”heading” data-page=”2”>Hello</div>

HTML Comments

Tables
● <table></table> - Defines an HTML table
● <tr></tr> - Defines a row of the table
○ <td></td> - Defines a cell in the row
○ <th></th> - Defines a cell as a column heading

Lists
Unordered List: <ul>
● Item <li>
● Item <li>
Ordered List: <ol>
1. First item <li>
2. Second item <li>

Forms
● Used to collect user inputs
● Form - <form></form> -- Defines HTML form
● Elements - Goes inside form tag
● Attributes
Ex:
○ method
○ action

Events
● Event attributes can be used with HTML tags
● Any script or function can be triggered on any event
Ex:
<button onclick="myFunction()">Click me</button>

Other New Features in HTML5
● Built-in audio and video support (without plugins)
● Enhanced form controls and attributes
● The Canvas (a way to draw directly on a web page)
● Drag and Drop functionality
● Support for CSS3 (the newer and more powerful version of CSS)
● More advanced features for web developers, such as data storage and offline
applications.

What is CSS?
● CSS stands for Cascading Style Sheets
● CSS describes how HTML elements are to be displayed on screen or in other
media
Ex:

Types of CSS
● External CSS - Including CSS from an external file
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
● Internal CSS - Writing CSS within head tag
<head>
<style>
body {
background-color: linen;
}
</style>
</head>
● Inline CSS - Defining CSS in HTML style attribute
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

CSS Selectors
● Id selector - #id
● Class selector - .class-name
● Element - div
● Attribute - [required] or [target=_blank]
○ a[href^="https"] - Selects every <a> element whose href attribute value begins with "https"
○ a[href$=".pdf"] - Selects every <a> element whose href attribute value ends with ".pdf"
● Colon (:)
○ a:hover - Selects links on mouse over
○ P:first-child - Selects every <p> element that is the first child of its parent
Ref: https://www.w3schools.com/CSSref/css_selectors.asp

CSS Examples
● Margine
div {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
● Padding
div {
padding: 25px 50px 75px 100px;
}
● Units (fixed and relative)
○ px - One pixel is equal to one dot on the computer screen (mainly used in screen media) - fixed
○ pt - One point is equal to 1/72 of an inch (mainly used in print media) - fixed
○ em - An em is equal to the current font-size - relative
○ % - Percent of the outer container - relative

Media Queries
● To define different style rules for different media types
● Can be applied on the following things:
○ Width and height of the viewport
○ Width and height of the device
○ Orientation (is the tablet/phone in landscape or portrait mode?)
○ Resolution
● Syntax
@media not|only mediatype and (expressions) {
CSS-Code;
}

Media Queries (Cont.)
● Example:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
● Loading external CSS based on media
<link rel="stylesheet" media="screen and (min-width: 480px)"
href="print.css">

New in CSS3
● rem Unit - Relative to the font-size of the root element -- like em
● Flex display type -
display: flex;
● Grid layouts
More
● New animations and transitions

Introduction to html5 and css3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to html5 and css3

Similar to Introduction to html5 and css3 (20)

Recently uploaded

Recently uploaded (20)

Introduction to html5 and css3