HTML,CSS

1. The HyperText Markup Language or HTML is the standard Markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets. (CSS) and scripting languages such as javaScript.
Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.
HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially released. It was
published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major
version of HTML.
The idea was to create a system where researchers could create documents and share them with
other researchers. The documents would be stored on a server and the researchers could access
them through a web browser.
Then in 1989, he composed an update proposing an Internet-based Hypertext System for global
computers. Tim Berners-Lee's idea was a model in which users can navigate from one set of
information on a computer to another set of information on another computer.
Tim Berners-Lee wrote the browser and server software for HTML in 1990.
Berners-Lee and another data system engineer collaborated in 1990 to request funding but CERN
rejected the project.
In late 1991 Tim Berners-Lee publicly posted the description of HTML in a document called
HTML Tags.
The first version of HTML had 18 elements which were mostly influenced by SGML (Standard
Generalized Markup Language) except for the hyperlink. 11 of those 18 elements exist inHTML4.
The basic characteristics for each element were defined in the browsers and these characteristics
can be modified and enhanced using css.
HTML VERSIONS
HTML 1.0
HTML 1.0 or first version of HTML was a version of SGML that had ability to link different
document or pages using 'href'.
HTML 1.0 had 20 elements or tags, now latest version of HTML, ie HTML5 has a lot more.
HTML 2.0
After HTML 1.0, the second version of HTML was released in 1994. HTML 2.0 was an
expansion of HTML 1.0.
HTML AND ITS HISTORY

2. Internet Engineering Task Force (IETF) was behind it's creation.
HTML 3.2
HTML 3.2 was released In 1997. HTML 3.2 had many new features like tables, superscript,
subscript etc.
Two most important features introduced in HTML 3.2 were tables and text flow around images.
Tables were widely used and programmers still use them but it is not recommended anymore. In
HTML5 div tags and other semantic elements are used more frequently instead of table element.
HTML 4.01
HTML 4.01 was released In 1999. HTML 4.01 introduced features like scripting, style sheets,
better tables, better forms frames and embedding objects.
HTML 4.01 was a revised version of HTML 4.0, it also included features for the disabled people
to enhance their interactivity with the Global world through Internet.
XHTML
In 2000 XHTML was released. XHTML stands for Extensible Hyper Text Markup Language.
XHTML has strict set of rules and it is basically an XML application of HTML.
HTML5
So all of this added up and then after so many year HTML5 was released in 2014. HTML5 is the
best version of HTML up till now. HTML5 improved user interactivity so much and also
lessened the burden of devices.
HTML5 fully supports all kind of media application that are there. HTML5 supports both audio
and video media content. HTML5 also provides full support for JavaScript to run in the
background.
PLATFORMS SUPPORTED:
• notepad
• notepad ++
• visual studio code
• visualcode
• code block and many more
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

3. <h1> defines the most important heading. <h6> defines the least important +
Output:
HTML HEADING
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space
before and after a paragraph.
CODE:

4. OUTPUT:
HTML Comment Tag
You can add comments to your HTML source by using the following syntax.
<!-- Write your comments here -->

5. CODE:
OUTPUT:
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.
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
CODE:

6. OUTPUT:

7. HTML Images
Images can improve the design and the appearance of a web page.
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
OUTPUT:

8. HTML Table
A table in HTML consists of table cells inside rows and columns.
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.
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or
columns.To make a cell span over multiple columns, use the colspan
attribute:
To make a cell span over multiple rows, use the rowspan attribute

9. OUTPUT:

10. OUTPUT:

11. COLSPAN:
OUTPUT:

12. HTML Lists
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.
OUTPUT:

13. 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
OUTPUT:

14. 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:
<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.
Text Fields
The <input type="text"> defines a single-line input field for text input.

15. OUTPUT:
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.

16. OUTPUT:
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.

17. OUTPUT:
HTML <iframe> Tag
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.

18. output:
Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content
some of semantic tags are as follows:

20. output:
Non-Symentc Tags:
These are those tags which tells nothing about its content.
examples of theseare <div> and <spam> tags.

21. output:
HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of element it is. There
are two display values: block and inline.
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 (stretches out to the left and right
as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.

22. output:
here are some examples of block tags
Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.

23. output:
here are some inline tags.
CSS(Cascading Style Sheets)
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
There are three ways of inserting a style sheet:
External CSS
Internal CSS

24. Inline CSS
EXTERNAL CSS:
output:

25. INTERNAL CSS:
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
output:
INLINE CSS:
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.

26. oytput:
css color:
output:

27. CSS Backgrounds
The CSS background properties are used to add background effects for elements.
the following CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

28. output:

29. My Static Webpage