Scribd
Upload
28 views161 pages

HTML & Css Mcit

Uploaded by

shreefashraf134
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views161 pages

HTML & Css Mcit

Uploaded by

shreefashraf134
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 161

Front End Course

Course Content
HTMl , HTML5
CSS , Css3
Bootstrap
Jquery
JavaScript
Drwamweaver
Google Search Consol
VS.Net

ECST Academy Front End Course 2


HTML & CSS
Hyper Text Markup Language
&

Cascading Style Sheets


Agenda:
• Introduction • Tables
• Editors • Lists
• Basic • Blocks
• Elements • Classes
• Attributes • IDs
• Headings • Iframes
• Paragraphs • Meta Tag
• Styles • HTML Form
• Formatting Controls

• Quotations • Marquees

• Comments • Audio & Video


• layouts
• Colors
• Links
• Images
Introduction
What is HTML?
HTML is the standard markup language for creating Web pages.

• HTML stands for Hyper Text Markup Language


• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page
A Simple HTML Document
HTML Tags
HTML tags are element names surrounded by angle brackets:

• HTML tags normally come in pairs like <p> and </p>


• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted before the tag name
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
The browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the four steps below to create your first web page with Notepad or TextEdit.
Basic
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.
Elements
HTML Elements
Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Empty HTML Elements
HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your
document readable by XML parsers, you must close all HTML elements properly.
Attributes
HTML Attributes
• All HTML elements can have 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"
Headings
HTML Headings
Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.
Bigger Headings
Bigger Headings
Paragraphs
HTML Paragraphs
Output
Output
Styles
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.


HTML Background Color
The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:


Summary
Formatting
HTML Formatting Elements
Quotation
Comments
Colors
Link one

Link Two
Links
HTML Links - Hyperlinks
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.
Images
Tables
Lists
Summary
Blocks
Classes
IDs
Iframes
Meta Tag
Meta Tag
HTML lets you specify metadata - additional important information about a document in a variety of ways. The META
elements can be used to include name/value pairs describing properties of the HTML document, such as author,
expiry date, a list of keywords, document author etc.

The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a
closing tag but it carries information within its attributes.

You can include one or more meta tags in your document based on what information you want to keep in your
document but in general, meta tags do not impact physical appearance of the document so from appearance point of
view, it does not matter if you include them or not.

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is
represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes −
HTML Form Controls
Marquees
Audio & Video
Layouts
Thank you 

You might also like