"How to HTML" : A Quick Guide

Introductory Note:

HTML uses tags as hidden keywords within a web page to define how your web browser must format and display content. Tags require two parts: an opening and a closing. For example, where <p> is the opening tag, </p> is the closing.  Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. Interpret this as the "close" character. There are some tags that are an exception to this rule, and where a closing tag is not required. Using <img> to show images is an example of this exception.

Common Tags

<h?> heading </h?> is used for header text (h1 for largest | h6 for smallest).

<p> paragraph text </p> is used for basic text.

<li> list content </li> is used to add bullet points to your text to create a list.

<b> bold </b> is used to bold the text between the tags.

<img src=“www.googleimages.com”> is used to show an image.

Section Divisions

<br> is used to break up content on a page. Think of it as ENTER on a keyboard.

<hr> is used to divide content by using basic a line.

• <hr style="opacity: .2;"> is reflective of our styling

Images

<img> tag attributes:  <img src=“url” width=“100%” height=“100%”>

• src=“url” URL of image (required)

• width=“100%” Image width (in pixels or %)

• height=“20px” Image height (in pixels or %)

Linking Tags

<a href=“url”> link text </a> is used for a basic link.

<a> tag attributes:

• href=“url” location of page to link to

• href=”mailto:email”Link which initiates an email (dependant on user’s email client)

Advanced Implementations:

Iframe: An iframe is used to display a web page within a web page (in our case, a mobile app).<iframe>“https://www.google.com” </iframe>

• <div style="height:100vh"><iframe width="100%" height="100%" src="URL"> </iframe> </div> is used to iframe web pages.

• <iframe width="100%" height="350" src="https://www.youtube.com/embed/DSf-GRnSYKk?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> is used to iframe videos.

 *** Please Note: when using YouTube videos, you MUST add ?rel=0 at the end of the web address. for example, rather than "https://www.youtube.com/embed/tt1-Ohe9QQU" it would be "https://www.youtube.com/embed/tt1-Ohe9QQU?rel=0"***