HTML - E-commerce

Introduction to HTML

HTML stands for Hypertext Markup Language. Hypertext defines the links between web pages. Markup language is a set of rules that defines how the layout and presentation of text and images should appear in a digital document. HTML tags or elements are commands enclosed by left < and right->angled brackets. These tags usually come in pairs with text or media located between the opening and closing tags, i.e., opening tag < TAG> “text or media” and closing tag < /TAG>.

This first line of an HTML document declares what type of document you created.

<!DOCTYPE html>

The second line of an HTML document should specify the language:

<html lang="en">

This is the basic structure of an html document:

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
<h1></h1>
<p></p>
</body>
</html>

The head element contains general information about an HTML page that isn’t displayed on the page itself. This information is called metadata and includes things like the title of the HTML document and links to stylesheets.

<!DOCTYPE html>
<html>
  <head>
    <!-- Metadata is contained in this element-->
  </head>
</html>

Get started with some HTML exercises:

Codeacademy.com

Table of HTML Elements

Element	Description	Example
<!DOCTYPE html>	Defines the document type and HTML version	<!DOCTYPE html>
<html>	The root element of an HTML document	<html></html>
<head>	Contains meta-information about the document	<head></head>
<video>	Defines a video or movie	<video width=”320″ height=”240″ controls><source src=”movie.mp4″ type=”video/mp4″></video>
<body>	Contains the visible page content	<body></body>
<h1> to <h6>	Defines HTML headings (h1 is the largest)	<h1>Heading 1</h1>
<p>	Defines a paragraph	<p>Paragraph text.</p>
<a>	Defines a hyperlink	<a href=”http://www.example.com”>Link</a>
<img>	Defines an image	<img src=”image.jpg” alt=”description”>
<br>	Inserts a single line break	<p>Text before<br>Text after</p>
<hr>	Defines a thematic break or horizontal line	<hr>
<nav>	Defines navigation links	<nav><a href=”#home”>Home</a></nav>
<button>	Defines a clickable button	<button>Click me</button>
<ul>	Defines an unordered list	<ul><li>Item</li></ul>
<ol>	Defines an ordered list	<ol><li>Item</li></ol>
<iframe>	Defines an inline frame	<iframe src=”http://www.example.com”></iframe>
<div>	Defines a section in a document (block-level)	<div>Content</div>

For a complete list of all HTML elements, visit the W3C HTML page.

Exercise

Open up a code editor online : you can try Codepen, or Jsfiddle, or you download an editor: Visual Studio, or Netbeans

Create a team section for your About Us page.

Create a heading: Our Team.

2. Create a div with a class teamcard to display your team members:


    <div class="team">
      
    </div>


    <div class="team">
      
    </div>

4. Add an image element to display your team members inside the div with the class teamcard.

5. Add the name of the person and their function in the company. For example: CEO, CFO, CMO, etc., and at least a few sentences of background information (also inside the div with the class teamcard, below the image).

Add some more elements to your page using HTML, CSS, and the page builder. You can find some ideas for your about us page on: About Us