Author Esenceweb What is HTML
Hyper Text Markup Language
Not a programing language
Markup Language for creating web pages/ documents
Building blocks of web
What we need to create an HTML file
Does not need a server
Files must end with .html extension
Runs in a web browser (Chrome, Firefox, etc)
Index.html is the root/home page of a website
Loads the index.html file
https://www.esenceweb.com/about
Loads the about.php file
Tag Syntax
<tagname>content</tagname>Element name surrounded by angel brackets
<h1>About Us</h1>Normally comes in pairs
<p>This is a paragraph</p>End tag is usually the same but with a forward slash
<br />(self closing)Some tags close themselves
<br> (fine in HTML5)
HTML page structure
Page structure HTML
<!doctype html>
<>
What is DOCTYPE
-Explains what type of document the page is
-HTML 4, HTML5, XHTML, etc
-DOCTYPE declaration defines this document as a type of HTML5.
What is <html>
html is a root element of html page
What is <head>
head element contains meta information about page like page title, description, external links etc
What is <title>
title element specifies a title for the page/document.
What is <body>
body element contains the visible page content.
What is <h1>
H1 is a large heading
What is <p>
P element defines paragraph
Inline .Vs Block Level Elements
Inline elements:
Do not start on a new line
Take only the necessary width
<span>, <img>, <a>
Block elements:
Start on a new line
Take full width available
<div>, <h1>-<h6>, <p>, <form>
Tag Attributes:
<tagname attributename=”attributevalue”> content </tagname>
<h1 title=”my company” > About Us </h1>
-All tags can have attributes
-Provide information about an element
-Placed within the start tag
-key/value pairs( id=”someid” )
HTML5 Semantic Element/Tags
A semantic element clearly describes its meaning to both the browser and the developer.
Semantic elements are also used to create a structured layout of HTML pages.
What is CSS?
Cascading stylesheet
Not a programing language
Stylesheet/Styling language
Used for layout and design
3 Methods for adding CSS
Inline CSS: Directly in the HTML element
Internal CSS: Using <style> tags within a single document.
External CSS: Linking an external .CSS file
CSS Selectors:
Colors in CSS
Box Model
Margin & Padding Shorthand
Margin:
Padding:
Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
4.png)
0 Replies to “Basics Of Html5 & Css3, Tips & Tricks”
Leave a Reply
Your email address will not be published.