# data[].attributes.body
Do you have a rough idea of what does it takes to build a website?
This checklist can help you find out if you missed anything (just in case)

# data[].attributes.body
Use the following tags:
<p>

<a>       href
<img>     src

<p><a href="https://padlet.com/techartvcb"><img src="c.jpg" width="158" height="242"></a></p>

# data[].attributes.body
Let´s use the tag <table>
in order to layout images

combine it with the following tags:

<tr> columns

<br> break point

<td> add a cell

Find out more:
https://www.w3schools.com/tags/tag_a.asp

# data[].attributes.body
<h1 style="color:blue; text-align:center;font-family:verdana">HELLO WORLD</h1>

# data[].attributes.body
ALIGN
<img align="left|right|middle|top|bottom">

NEXT TO EACH OTHER

<table>
<tr>
<td><img src="IMAGE1.jpg"></td>
<td><img src="IMAGE2.jpg"></td>
</tr>
</table>

# data[].attributes.body
<html>

<head>

<title>

<body>

<h1>
<p>

<h2>

<strong> to change the word into BOLD

<em> to change the word into italics

<a> defines a hyperlink

href attribute, which indicates the link's destination

<a href=" https://padlet.com/techartVCB/2BACH18”>Padlet</a>

# data[].attributes.body
WE WILL SAVE OUR PROJECT ON A PENDRIVE!!

STEP 1
Create a folder called “web project”
This folder will locate our html file and the following folders:

STEP 2
Create a folder called “images”
Create a folder called “styles”

Remember, we will use LOWERCASE

# data[].attributes.body
How many of these words do you know?
-Java
-URLS
-CSS
-HTML
-Browser
-Web cookie
-Navigation
-Dropdown Menu
-Tab

To ensure that we all know the meaning of each of them, please follow the teacher instructions!

# data[].attributes.body
THE BEST AND THE WORST

Best
https://www.awwwards.com/

Worst
www.theuselessweb.com

# data[].attributes.body
Step 1: Open Notepad

Step 2: Write your HTML
project with the following tags:

<html>
<head>
<title>
<body>
<h1>
REMEMBER THAT WE HAVE AN OPENING TAG AND A CLOSING TAG
e.g.: <head>   </head>
Step 3: Save the HTML Page.
Select "Save As," save the file to the Desktop, and name the file using the ".html" extension (e.g., "web.html").

ADD AND IMAGE
<img>

REMEMBER THAT <img> tag HAS NO END TAG but it has a required ATTRIBUTE: sr

Ex: <img src="smiley.gif">

or

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Step 4: View the HTML Page in Your Browser.

# data[].attributes.body
http://lazyeyes.cool/

https://howdeepistheocean.io/

http://space.vanderlanth.io/

https://visuwords.com/TECHNOLOGY

# data[].attributes.body
Writing code is writing a precise set of instructions that a computer can understand.
What is html?
It is a bunch of TAGS!

<tagname> content </tagname>

Let´s get familiar with the TAGS:

Exercise 1
Find out the meaning of the folowing tags:

html
head
body
title
h1
h2
a
p

Create a support document containing main html tags.
The following  link might be helpful!

https://www.w3schools.com/tags/tag_br.asp

# data[].attributes.body
Let´s add style to our website with the...STYLE ATTRIBUTE!

5.1.TEXT COLOR
Used in the following tags:
<h1>
<p>

<h2>

Rememnber!Attribute inside the openning tag!
<h2 style="color:blue">

style="color:blue"
style="color:red"

5.2. BACKGROUND COLOR
Used in the following tags:
<body>
style="background-color:powderblue"

6.1.FONT

style="font-family:verdana"

style="font-family:courier"

6.2.TEXT SIZE

style="font-size:300%"

6.3.TEXT ALIGNMENT

style="text-align:center"

Useful links!

COLOR CODES
https://www.computerhope.com/htmcolor.htm

FONTS
https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html