Do It Yourself. Websites

Do
It Yourself: Websites!
Making Basic Websites
Volume: 1, HTML(Basic Structure)

Presented By: Bryan M. Dungan
Copyright©2016 by The Blaze Team

Get More Tips by going to
www.theblazeteam.com
Contact Us There!
Let’s Jump Right Into It, Shall We?

Each HTML Element tells the browser(Chrome, Firefox, Internet Explorer, e.g.)
something about the information in between its opening and closing tags.

We must also know that you can organize your page in an assortment of ways
that impacts the overall outlook of your website.
Different Examples of Elements

(FOR THE SAKE OF OUR EXAMPLE)
Gold Text = HTML Element and its Tags (<html> </html>)
Purple Text = Title Elements and its Tags (<title> </title>)
Red Text = Body Elements and its Tags (<body> </body>)
Green Text = Heading Elements and its Tags (<h1> </h1>)
Blue Text = Paragraph Elements and its Tags (<p> </p>)

V––––––—The HTML Coding––––––-V

<html>
<title> Mama Mias Pizza </title>
<body>
<h1> I Love Pizza </h1>
<p> Pizza makes the world go round. It is even shaped round like the
world. </p>
</body>
</html>

V––––––—The HTML Outcome––––––-V
You can save any text file to test your own work as (.html) and your own
computer can render it such as so. When writing complex codes, I’ve
found that, downloading a FREE syntax organizer such as Sublime 3 or
Notepad++ helps.

LETS ADD IN SOME LISTS
(FOR THE SAKE OF OUR EXAMPLE)
Gold Text = HTML Element and its Tags (<html> </html>)
Purple Text = Title Elements and its Tags (<title> </title>)
Red Text = Body Elements and its Tags (<body> </body>)
Green Text = Heading Elements and its Tags (<h1> </h1>)
Blue Text = Paragraph Elements and its Tags (<p> </p>)
Pink Text = Ordered List Elements and its Tags (<ol> </ol>)
Baby Blue Text = Unordered List Elements and its Tags (<ul> </ul>)
Dark Blue Text = List Elements and its Tags (<li> </li>)


<html>
<title> Mama Mias Pizza </title>
<body>
<h1> I Love Pizza </h1>
<p> Pizza makes the world go round. It is even shaped round like the
world. </p>
<h2> Look at Our Pizzas </h2>
<ol>
<li> Cheese Pizza</li>
<li> Pepperoni Pizza </li>
<li> Meat Lovers Pizza </li>
</ol>
<h2> With Every Pizza We Offer: </h2>
<ul>
<li> Great Customer Service </li>
<li> Free 2-Liter Soda </li>
<li> Great Smiles </li>
</ul>
</body>
</html>

As a reminder, HTML is merely the structure for the entire website. The
visuals such as color panels, images, interactive button designs, etc. are
better controlled with CSS which I can show you next Book.

A Few Extra Lists
Red Text = Definition List Elements and its Tags (<dl> </dl>)
Baby Blue Text = Defined Term Elements and its Tags (<dt> </dt>)
Green Text = Definition Elements and its Tags (<dd> </dd>)

Nested Lists
Gold Text = Unordered List Element and its Tags (<ul> </ul>)
Purple Text = List Elements and its Tags (<li> </li>)


<h1> Ingredients Found </h1>
<dl>
<dt> Ricotta </dt>
<dd> a white unripened whey cheese of Italy that resembles cottage cheese; also :
a similar cheese made in the United States from whole or skim milk </dd>
<dt> Pesto </dt>
<dd> a sauce typically made with basil, pine nuts, olive oil, and grated Parmesan
blended together and served hot or cold over pasta, fish, or meat. </dd>
<dt> Italian Sausage </dt>
<dd> a type of coarse pork sausage seasoned with garlic, fennel seed, possibly
anise seed and made two ways, hot (with chile peppers) or sweet (without chile
peppers) </dd>
</dl>

<ul>
<li> Pepperoni Pizza </li>
<ul>
<li> Cheese </li>
<li> Pepperoni </li>
</ul>
<li> Meat Lovers Pizza </li>
<ul>
<li> Cheese </li>
<li> Pepperoni </li>
<li> Bacon </li>
<li> Ham </li>
<li> Italian Sausage </li>
</ul>
</ul>

OK, LET’S TALK HEADINGS
You must understand this. When using headings (h1-h6) Browsers display
them in different sizes.

<h1> This would be the Main Header </h1>
<h2> This would be a Level 2 Heading </h2>

Each heading (h1-h6) can be customized from your own personal preference
in size, font, color, etc. using CSS.

The Next Thing We Must Understand…
HTML needs special instructions to make special characters and what we
would consider normal grammatical syntax.

Bold = (<b> </b>)
Italic = (<i> </i>)
Superscript = (<sup> </sup>)
Subscript = (<sub> </sub>)
Line Breaks = (<br />)
Horizontal Rule = (<hr />)


<p> Also Feel Free To Try Our <b> Deluxe Mega Cheese Pizza! </b> </p>
<p> It is the <b> Only </b> pizza we have with our <i> Special Sauce </i> inside.
</p>
<p> It may very well be the next big thing to the 10<sup> th </sup> <b> Power! </b>
<hr/>
<p> <b> The Deluxe Mega Cheese Pizza </b> <br/> The Best Dam Pizza We Could
Think Of </br> In 10 Minutes. </p>


Ok, Let’s Talk About The Extras!

Gold Text = Strong Element and its Tags ( <strong> </strong>)
Purple Text = Emphasis Elements and its Tags (<em> </em>)
Red Text = Blockquote Elements and its Tags (<blockquote cite=”Put Link In Here”>
</blockquote>)
Green Text = Short Quote Elements and its Tags (<q> </q>)
Blue Text = Acronym Elements and its Tags (<acronym title=”Put Full Acronym
Here”> </acronym>)
Pink Text = Address Elements and its Tags (<address> <a href=”Put Desired Link
Command Here”> </a> </address>)
Baby Blue Text = Insert Elements and its Tags (<ins> </ins>)
Grey Text = Horizontal Rule and its Tags (<hr />)
Dark Blue Text = Delete Elements and its Tags (<s> </s>)


<p> <strong> Attention: </strong> Our Pizzas Do Carry Glutin! </p>
<p> We Are Not Responsible <strong> For Any Deaths! </strong></p>
<p> In Fact, We <em> should </em> sue you for acting dumb and <em> avoiding
</em> our warning. </p>
<p> As Forest Gump Once Said
<hr/>
<q> Stupid is as Stupid does </q></p>
<blockquotecite=”http://www.urbandictionary.com/define.php?
term=stupid%20is%20as%20stupid%20does”>
<p> It means that an intelligent person who does stupid things is still stupid. You are
what you do. </p>
</blockquote>
<p><acronym title=”Smart Talented Unique Person in Demand”> STUPID
</acronym></p>
<hr/>
<p> If you do find yourself disregarding our <strong> Warnings </strong> and die,
feel free to contact us from beyond the grave at:</p>
<address>
<p><a href=”dontcallus@yourearetard.org”> dontcallus@yourearetard.org </a>
</p>

<p> <ins> 123 Mamas Street, Los Angeles, CA, 90022. </ins></p>
</address>
<p> Our Old Address of <q> <s> 5678 George Dieter, El Paso, TX, 79936. </s> </q>
has changed. </p>


Let’s Talk Links

Links are created using the <a> element. Users can click on anything between the
opening <a> tag and the closing </a> tag. You specify which page you want to link
using the href attribute.
<a href=”http://www.theblazeteam.com”> The Blaze Team </a>

Now Add Links to Lists


<p> Contact Us
<ul>
<li> <a href=”https://www.facebook.com/TheBlazeTeam/?ref=hl“>
Facebook </a> </li>
<li> <a href=”https://twitter.com/TheBlazeTeam“> Twitter </a> </li>
<li> <a href=”https://www.instagram.com/theblazeteam/“> Instagram
</a> </li>
</ul>

</p>


Let’s Learn How To Add An Image!

Let’s start off by showing you how to group all of your codes and files in order. When
putting a webpage together, you must keep all of your (.html, .css, .js, .php, and images)
all together in a certain order so your browser can know where to find the files you are
calling out in your code… let me show you what I mean.

In here you can see that I have our .html file with our Mama Mias Pizza
Tutorials on it by the name of “one.html”. Along with our HTML page, we
also have folders designated for our Images, Css files and Javascript files.
When you have multiple HTML pages, you can leave save them right next
to the index HTML (As in you can save your other connecting HTML
pages next to our One.html page). So for example, your page could have
an Index page(One.html), A contact us page(Contact.html), and about us
page(About.html) and save them next to eachother without assigning them
folders unless each page abides by different CSS rules(Css is the visual
effects and elements that make a page look the way it does.)

Let’s pretend we have an image of our mama mias pepperoni pizza on our computer saved
as “peppizza.jpg” and we want to insert it into a webpage; this is the code we would use
and how we would pull it from the folder “Images”:


<h1> Our Sexy Looking Pepperoni Pizza! </h1>

<img src=“Images/peppizza.jpg “>

<br/>

<a href=“Order.html”>Order It Here Today!</a>

Lets break down the code real quick to further understand…

<img src=“Images/peppizza.jpg”>

(First Off, MAKE SURE YOU PAY ATTENTION TO YOUR CAPS BECAUSE
HTML CODING IS CAP SENSATIVE)
(Our Images folder has a capitol “I”, or else your browser will not be able to find the
“Images” folder and in turn… your images… which will cause your HTML page to
load in error.)

<br/>

(If it weren’t for adding the break element, our page would have rendered like this:

<a href=“Order.html”>Order It Here Today!</a>

(We added a link to our “Order.html” page which is clickable and will redirect the
user to another HTML page where you can create an interactive system to let the
user order. But I’ll show you that later down the line.)
(You must also understand that if you save your “Order.html” file in another folder
like..lets say your CSS folder for example for whatever reason than you would just
simply make it look like this:

<a href=“CSS/Order.html”>Order It Here Today!</a>

Bring On The Tables!
Some browsers automatically draw lines around the table and/or the
individual cells. To further control the borders of tables, you’ll need CSS
and we just aren’t there yet. Don’t worry, we’ll get there!

Red Text = Table Elements and its Tags (<table> </table>)
Baby Blue Text = Table Row Elements and its Tags (<tr> </tr>)
Green Text = Table Data Elements and its Tags (<td> </td>)
Gold Text = Table Heading Elements and its Tags (<th> </th>)


<h1> Look At Our Sales</h1>
<br/>
<p> Lucky Number, Gets A Free Pizza! </p>
<table>
<tr>
<th></th>
<th scope=”col”> Mon. </th>
<th scope=”col”> Wed. </th>
<th scope=”col”> Fri.</th>
<th scope=”col”> Sun. </th>
</tr>
<tr>
<th scope=”row”> Pepperoni Pizzas Sold: </th>
<td> 22 </td>
<td> 15 </td>
<td> 78 </td>
<td> 42 </td>
</tr>
<tr>
<th scope=”row”> Meat Lovers Pizzas Sold: </th>
<td> 37 </td>
<td> 29 </td>
<td> 81 </td>
<td> 96 </td>
</tr>
<tr>
<th scope=”row”> Deep Dish Pizzas Sold: </th>
<td> 44 </td>
<td> 50 </td>
<td> 63 </td>
<td> 11 </td>
</tr>
</table>


Do It Yourself. Websites

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Do It Yourself. Websites

Uploaded by

Copyright:

Available Formats

Do

Copyright©2016 by The Blaze Team

Lets break down the code real quick to further understand…

You might also like