"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 (dependent 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"      

***