HTML
HTML stands for HyperText Markup Language developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).
HTML elements are represented by tags; HTML tags label pieces of content such as “head”, “body”, "p" and so on.
Learn how to code HTML, Hypertext Markup Language using online tools and resources to build and deploy a website.
w3schools.com/tags
developer.mozilla.org/en-US/docs/Learn/HTML
The DOCTYPE declaration for HTML5 is very simple: <!DOCTYPE html>
The character encoding (charset) declaration is also very simple: <meta charset="UTF-8">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The HTML comment tag <!--...--> does not displayed in the browsers.
HTML Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Development 101</title>
</head>
<body>
<!-- <-[open syntax]
HTML Element Tags
[close syntax]-> -->
</body>
</html>
HTML5: Sample Template
<!DOCTYPE html>
<html lang="en">
<head>
<!-- NOTE: HTML5 -->
<meta charset="UTF-8">
<!-- NOTE: Responsive meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Development 101</title>
</head>
<body>
<header>
<h1>Week One: HTML Sample Code</h1>
</header>
<main>
<p>This class is <strong>awesome</strong>!</p>
</main>
<footer>
<p>Author: First Name</p>
</footer>
</body>
</html>
Commonly Used HTML Tags
<!DOCTYPE html>
<html lang="en">
<head>
<!-- NOTE: HTML5 -->
<meta charset="UTF-8">
<!-- NOTE: Responsive meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Commonly Used HTML Tags</title>
</head>
<body>
<!--
heading -
-->
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<!--
p - paragraph
-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!--
bold / strong - Bold / Strong
-->
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut <strong>labore et dolore</strong> magna aliqua. </p>
<!--
i / em - Italic / Emphasis
-->
<p>Lorem ipsum dolor sit amet, <i>consectetur adipisicing elit</i>, sed do eiusmod tempor incididunt ut <em>labore et dolore</em> magna aliqua. </p>
<!--
ul - An unorder list create a bulleted list
ol - An order list create a numerical list
-->
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Labore et dolore magna aliqua.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Labore et dolore magna aliqua.</li>
</ol>
<!--
a - Create a link (hyperlinks or "anchors") to an external site (Yahoo) and using the attribute target to open in a new browser tab.
-->
<p>Lorem ipsum dolor sit amet, <a href="https://yahoo.com" target="_blank">consectetur adipisicing elit</a>. </p>
<!--
a - Create a link (hyperlinks or "anchors") to an internal page from website
-->
<p>Lorem ipsum dolor sit amet, <a href="about.html">consectetur adipisicing elit</a>. </p>
<!--
img - Image tag has an attribute src (source) of "filename.extension" and attribute alt (alternative) "image description" used for search engines and screen readers
-->
<img src="https://picsum.photos/350" alt="external image picsum.photos" />
<img src="img/img-html.jpg" alt=internal image from the image assets folder" />
<!--
div - Used for dividing your web page content into containers
-->
<div>
<h2>Heading Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</body>
</html>
HTML
Learn how to code HTML, Hypertext Markup Language using online tools and resources to build and deploy a website.
The 2-hour session is designed to provide a foundational understanding of HTML to help build and deploy a website.
Additional Cources
HTML & CSS
HTML Hypertext Markup Language provides basic structure to the site and CSS Cascading Style Sheets, is used to style the appearance of content-using, for example, fonts or colors.
Learn how to add style and pizzazz into a website or content management template.
Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
Learn how to integrate the framework into a website or content management.
Quality Assurance (QA)
Learn how to fix webpage issues on different types of screen sizes, browsers, operating systems, and other platforms.
We will examine the design precess and testing for the best website experience to the particular user base.