<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML and CSS Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header id="introduction"><h1>Introduction</h1></header>
<p id="content"><b>HTML stands for "Hyper text markup language"</b>. It is used to design a structure for a web page. It is the most basic language used in front-end web devlopement and is very easy to learn.</p>
<ul id="list_unordered">
<li>It defines the content and structure of web content.</li></br>
<li>Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. </li></br>
<li>HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages.</li>
</ul>
<p><b>Below is an HTML example:</b></p>
<code class="code-class">
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</code>
<p id="content"><b>Cascading Style Sheets (CSS)</b> is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p><b>Below is an example how CSS works:</b></p>
<code class="code-class">
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.style-class{
color: green;
border: solid blue;
padding: 6px;
border-radius: 5px;
font-family: sans-sarif;
}
</style>
</head>
<body>
<p>This is the normal paragraph</p>
<p class="style-class">This is CSS styled paragraph</p>
</body>
</html>
</code>
<p><b>Another Example:</b></p>
<code class="code-class">
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.style1-class{
color: blue;
padding: 6px;
border-radius: 5px;
font-family: sans-sarif;
transform: rotate(-2deg)
}
</style>
</head>
<body>
<p>This is the normal paragraph</p>
<p class="style1-class">This is CSS styled paragraph</p>
</body>
</html>
</code>
</section>
<section class="main-section" id="Importance_of_HTML">
<header id ="HTML_importance"><h1>Importance of HTML</h1></header>
<p id="content">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. </p>
<ul id="list_unordered">
<li>Provides the foundation of web development.</li></br>
<li>Crucial for search engine optimization.</li></br>
<li>Standardizes the structure of web content.</li></br>
<li>Compatible with all web browsers and devices.</li></br>
<li>Constantly evolving language.</li></br>
<li>Provides a flexible and responsive design framework.</li>
</ul>
</section>
<section class="main-section" id="Importance_of_CSS">
<header id="Importance_CSS"><h1>Importance of CSS</h1></header>
<p id="content">While HTML is used to design the strucuture of a web page, CSS is used to visually enhance it i.e to give web page a style. CSS stands for "Cascading Style Sheets". HTML and CSS both are important languages for front end devlopement.</p>
<p id="content">
Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements.
</p>
<p id="content"><b>The box model:</b> Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items.</p>
<p id="content"><b>Backgrounds and borders:</b> From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</p>
<p id="content"><b>Sizing items with CSS:</b> CSS helps us to resize the elements according to the web page, which makes it easy to understand the content.</p>
<p id="content"><b>Selector:</b> In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.</p>
<p id="content"><b>Pseudo-classes:</b> Pseudo-classes are used in CSS selectors to permit formatting based on information that is not contained in the document tree.</p>
<ul id="list_unordered">
<li>One example of a widely used pseudo-class is :hover, which identifies content only when the user "points to" the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover.</li></br>
<li>A pseudo-class classifies document elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as ::first-line or ::first-letter.[6] Note the distinction between the double-colon notation used for pseudo-elements and the single-colon notation used for pseudo-classes.</li>
</ul>
</section>
<section class="main-section" id="HTML_graphics">
<header id="HTML_graphics"><h1>HTML graphics</h1></header>
<p id="content">Graphics are representations used to make web-page or applications visually appealing and also for improving user experience and user interaction. </p>
<p id="content">Some examples of graphics are photographs, flowcharts, bar graphs, maps, engineering drawings, constructional blueprints, etc. Usually, the following technologies are used in web graphics with HTML5 Canvas API, WebCGM, CSS, SVG, PNG, JPG, etc.</p>
<p id="content"><b>SVG (Scalable Vector Graphics):</b> </p>
<ul id="list_unordered">
<li>These are images created by a markup language that are reusable, simple, high-quality standalone images that can be exported and imported as well.</li></br>
<li>They are cross-browser friendly and can be used both on the client-side and server-side of the application.</li></br>
<li>They can be manipulated to create animations, hybrid images, etc by editing the markup language or by editing using a stylesheet.</li></br>
</ul>
<p><b>Canvas API:</b></p>
<ul id="list_unordered">
<li>Has no DOM and uses vector based methods to create objects, graphics and shapes.</li></br>
<li>Canvas API applications can be standalone or integrated with HTML or SVG.</li></br>
<li>Widely used for games.</li>
</ul>
</section>
<section class="main-section" id="Importance_of_HTML_and_CSS_in_front_end_devlopement">
<header id="HTML_CSS_devlopment"><h1>Importance of HTML and CSS in front end devlopement</h1></header>
<p>In front-end devlopment there are three languages which are mainly used:</p>
<ol id="list_ordered">
<li><b>HTML</b></li>
<li><b>CSS</b></li>
<li><b>Javascript</b></li>
</ol>
<p>When it comes to front-end devlopment all the three languages are used in order to create a web page.</p>
<p>HTML is used to design the structure of a webpage whereas CSS is used to style the webpage so it would look good.</p>
<p>Javascript is used to make the web page more interactive.</p>
<p>Below is an example:</p>
<code class="code-class">
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo"><i>Click the button and I will magically disappear!!</i></p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
</code>
<p><b>Below is another example:</b></p>
<code class="code-class">
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p><i>Click the button below to see the magic!!</i></p>
<button type="button" onclick="window.alert('Hello Freecodecamp!!')">Click Here!</button>
</body>
</html>
</code>
</section>
<section class="main-section" id="History_of_HTML_and_CSS">
<header id="HTML_history"><h1>History of HTML and CSS</h1></header>
<p><b>Development of HTML:</b></p>
<ul>
<li>In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes of 1990, Berners-Lee listed "some of the many areas in which hypertext is used"; an encyclopedia is the first entry.</li>
</ul>
<p><b>Development of CSS:</b></p>
<ul>
<li>CSS was first proposed by Håkon Wium Lie on 10 October 1994. At the time, Lie was working with Tim Berners-Lee at CERN. Several other style sheet languages for the web were proposed around the same time, and discussions on public mailing lists and inside World Wide Web Consortium resulted in the first W3C CSS Recommendation (CSS1) being released in 1996. In particular, a proposal by Bert Bos was influential; he became co-author of CSS1, and is regarded as co-creator of CSS.</li>
</ul>
</section>
<section class="main-section" id="References">
<header id="refrences"><h1>References</h1></header>
<p><b>Below are the reference websites:</b></p>
<p><a href ="https://en.wikipedia.org/">Wikipedia</a></p>
<p><a href="https://www.w3schools.com/">w3schools</a></p>
<p><a href ="https://www.geeksforgeeks.org/">geeksforgeeks</a></p>
<p><a href="https://developer.mozilla.org/">MDN docs</a></p>
</section>
<nav id="navbar">
<header><h1>HTML and CSS</h1></header>
<ul>
<li>
<a class="nav-link" href="#Introduction">Introduction</a>
</li>
<li>
<a class="nav-link" href="#Importance_of_HTML">Importance of HTML</a>
</li>
<li>
<a class="nav-link" href="#Importance_of_CSS">Importance of CSS</a>
</li>
<li>
<a class="nav-link" href="#HTML_graphics">HTML graphics</a>
</li>
<li>
<a class="nav-link" href="#Importance_of_HTML_and_CSS_in_front_end_devlopement">Importance of HTML and CSS in front end devlopement</a>
</li>
<li>
<a class="nav-link" href="#History_of_HTML_and_CSS">History of HTML and CSS</a>
</li>
<li>
<a class="nav-link" href="#Refrences">References</a>
</li>
</ul>
</nav>
</main>
</body>
</html>
