CREATING OUR WEBSITE

techartVCB — 2018-09-18 11:40:17 UTC

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)

1-VOCABULARY

techartVCB — 2018-09-18 15:20:53 UTC

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!

2-CREATIVE PROCESS

techartVCB — 2018-09-18 15:27:54 UTC

THE BEST AND THE WORST

Best
https://www.awwwards.com/

Worst
www.theuselessweb.com

3-ABOUT HTML

techartVCB — 2018-09-26 09:07:16 UTC

Writing code is writing a precise set of instructions that a computer can understand.
What is html?
It is a bunch of TAGS!

content

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

4-SAVING OUR PROJECT

techartVCB — 2018-10-02 15:37:20 UTC

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

5-EXERCISE 1-2

techartVCB — 2018-10-03 08:39:51 UTC

Step 1: Open Notepad

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

<br><body><br><h1><br>REMEMBER THAT WE HAVE AN <mark>OPENING TAG</mark> AND A <mark>CLOSING TAG</mark><br>e.g.: <head> </head><br>Step 3: Save the HTML Page.<br>Select "<strong>Save</strong> As," <strong>save</strong> the <strong>file</strong> to the Desktop, and name the <strong>file</strong> using the <mark>".</mark><strong><mark>html</mark></strong><mark>" extension </mark>(e.g., "web.<strong>html</strong>").<br><br>ADD AND IMAGE<br><strong></strong><br> <br> REMEMBER THAT tag <strong>HAS NO END TAG </strong>but it has a required ATTRIBUTE: <strong>sr</strong></div><div><br></div><div><strong>Ex: </strong>src="smiley.gif"</strong>></div><div> or</div><div> src="smiley.gif"</strong> <strong>alt="Smiley face"</strong> <strong>height="42"</strong> <strong>width="42"</strong>></div><div><br><br>Step 4: View the HTML Page in Your Browser.</div> </article> <article> <h1>EXERCISE 3-4</h1> <p>techartVCB — 2018-10-08 15:26:50 UTC</p> <div><strong><html></strong></div><div><strong><head></strong></div><div><strong><title></strong></div><div><strong><body></strong></div><div><strong><h1></strong><br> <strong><p></strong></div><div><strong><h2></strong></div><div><br></div><div><strong><strong> </strong>to change the word into <strong>BOLD</strong></div><div><strong><em> </strong>to change the word into <strong><em>italics<br><br></em></strong><strong><a> </strong>defines a hyperlink </div><div><br></div><div><strong>href </strong>attribute, which indicates the link's destination</div><div><br></div><div><br></div><div><strong><a href=" </strong>https://padlet.com/techartVCB/2BACH18<strong>”></strong>Padlet<strong></a></strong></div> </article> <article> <h1>EXERCISE 5-6</h1> <p>techartVCB — 2018-10-10 12:18:34 UTC</p> <div>Let´s add style to our website with the...STYLE ATTRIBUTE!<br><br><mark>5.1.TEXT COLOR<br>Used in the following tags:<br></mark><strong><mark><h1></mark></strong><mark><br></mark><strong><mark><p></mark></strong></div><div><strong><mark><h2></mark></strong><strong><br><br>Rememnber!Attribute inside the openning tag!<br></strong><strong><mark><h2 </mark></strong><mark>style="color:blue"</mark><strong><mark>><br><br></mark></strong><br></div><div>style="color:blue"<br>style="color:red"<br><br><mark>5.2.</mark><strong><mark>BACKGROUND COLOR</mark></strong> <br><mark>Used in the following tags:<br></mark><strong><mark><body></mark></strong><br> style="background-color:powderblue"<br><br><mark>6.1.FONT<br><br></mark>style="font-family:verdana"<br><br>style="font-family:courier"<br><br><mark>6.2.TEXT SIZE<br><br></mark>style="font-size:300%"<br><br><mark>6.3.TEXT ALIGNMENT<br></mark><br>style="text-align:center"<br><br><strong><mark>Useful links!<br></mark></strong><br>COLOR CODES<br><a href="https://www.computerhope.com/htmcolor.htm">https://www.computerhope.com/htmcolor.htm</a><br><br>FONTS<br><a href="https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html">https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html</a></div> </article> <article> <h1>IMAGES</h1> <p>techartVCB — 2018-10-17 12:32:21 UTC</p> <div><mark>ALIGN</mark><br><br><br><mark>NEXT TO EACH OTHER<br></mark><br><mark><table></mark><br><mark><tr></mark><br><mark><td></mark><mark></td></mark><br><mark><td></mark><mark></td></mark><br><mark></tr></mark><br><mark></table></mark></div> </article> <article> <h1>EXERCISE 5-6 PART 2</h1> <p>techartVCB — 2019-10-04 12:15:42 UTC</p> <div><strong><h1 </strong><strong><mark>style="color:blue; text-align:center;font-family:verdana"</mark></strong><strong>></strong><em>HELLO WORLD</em><strong></h1></strong></div> </article> <article> <h1>EXERCISE 9</h1> <p>techartVCB — 2019-10-09 09:28:37 UTC</p> <div>Let´s use the tag <strong><mark><table></mark></strong><br>in order to layout images<br><br>combine it with the following tags:<br><br><strong><mark><tr> </mark></strong><strong>columns</strong></div><div><strong><mark><br> </mark></strong><strong>break point</strong></div><div><strong><mark><td> </mark></strong><strong>add a cell</strong><strong><mark><br><br><br></mark></strong><strong>Find out more:</strong><strong><mark><br></mark></strong><a href="https://www.w3schools.com/tags/tag_a.asp">https://www.w3schools.com/tags/tag_a.asp</a></div><div><br><br><br><br><br></div> </article> <article> <h1>IMAGE AS HYPERLINK</h1> <p>techartVCB — 2019-10-16 08:26:51 UTC</p> <div>Use the following tags:<br><strong><mark><p></mark></strong></div><div><strong><mark><a> href</mark></strong><mark><br></mark><strong><mark> src</mark></strong></div><div><br><strong><p><a href=</strong>"https://padlet.com/techartvcb"<strong>>"c.jpg" width="158" height="242"<strong>></a></p></strong></div> </article> </main></body></html>