Scribd
Upload
129 views

Web Coding Basics: The Codes

This document provides an introduction to basic HTML, CSS, and web coding concepts. It explains the structure of HTML documents and common tags used in the head and body of a page. Key points covered include the differences between HTML and CSS, basic colors and fonts, creating links and lists, and publishing websites safely. Safety tips are also provided around keeping passwords secure, social networking wisely, and avoiding revealing too much personal information online.

Uploaded by

api-338008544
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
129 views

Web Coding Basics: The Codes

This document provides an introduction to basic HTML, CSS, and web coding concepts. It explains the structure of HTML documents and common tags used in the head and body of a page. Key points covered include the differences between HTML and CSS, basic colors and fonts, creating links and lists, and publishing websites safely. Safety tips are also provided around keeping passwords secure, social networking wisely, and avoiding revealing too much personal information online.

Uploaded by

api-338008544
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Name ___________________________________ Miss Kostishion

WEB CODING BASICS

THE CODES:

1. HTML – “Hypertext Markup Language”


 Creates the structure and layout of a website
 Correct structure:

<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>

2. CSS – “Cascading Style Sheets”


 Allows web developers to control how a website looks

1|Page
WEB SAFETY:

1. Keep Passwords Secret


a. Do NOT reveal passwords to others, even friends (parents only
b. Never provide your password over email
c. Do NOT type passwords on computers that you do not control

2. Be Smart while Social Networking and Blogging


a. Follow website age limits
b. Do NOT meet anyone in person that you have met online only
c. Communicate with people you already know
d. Do NOT use full names
e. Do NOT reveal the school that you go to or town that you live in
f. Do NOT post pictures that reveal a lot of personal information (i.e. street signs,
school logos on clothing, outside of home)
g. Do NOT be an “online bully,” and be aware of online bullying. Treat others as
you would want to be treated (Luke 6:31). If you feel that you have been bullied
online, print out the conversation(s) and tell an adult immediately.
h. Ask yourself if you would be comfortable sharing anything that you post with a
stranger. If you are not, do not post it.

3. Never reveal your phone number or house address

4. Never fill out forms on websites (unless an adult is with you)

2|Page
COLORS:

Colors are represented by a combination of numbers and letters on the web. These are called
“Hex Codes.” Hex codes are always six numbers/letters. You can find a list of hex codes here:
http://www.color-hex.com or here: http://www.w3schools.com/tags/ref_colorpicker.asp

Basic colors codes for quick reference:

Black: #000000
Blue: # 0000FF
White: #FFFFFF
Navy Blue: #000080
Gray: #666666
Green: # 009933
Light Gray: #C0C0C0
Red: #FF0000
Hot Pink: # FF0066
Yellow: #FFFF00
Light Pink: #FFCCFF
Purple: #993399
Light Blue: #99CCFF
Brown: #663300
Teal: #008080
Maroon: #800000
Lime Green: #00FF00

3|Page
BASIC “HEAD” TAGS:

<head>

<title> YOUR TITLE HERE </title>

<style>

a:link {color: HEX NUMBER;}


a:visited {color: HEX NUMBER;}
a:hover {color: HEX NUMBER;}
a:active {color: HEX NUMBER;}

html {background: HEX NUMBER;


} This is your CSS –
the information between
<style> </style>
body {
font-size: NUMBERpx;
font-family: FONT NAME;
background-color: HEX NUMBER;
color: HEX NUMBER;
}

</style>

</head>

4|Page
BASIC “BODY” TAGS:

<body>
All content goes between these tags
</body>

Making a “return,” or a new line:

- Small space, or ‘page break’ <br>


- Large space, or ‘new paragraph’ <p>

Alignment:

- Center <center> YOUR TEXT HERE </center>


- Left <p align=”left”>
- Right <p align=”right”>

Text decorations:

- Bold <b> YOUR TEXT HERE </b>


- Italic <i> YOUR TEXT HERE </i>
- Underline <u> YOUR TEXT HERE </u>

Creating links:

- General Link
<a href=”WEB URL”> LINK TEXT GOES HERE </a>

- Open link in new tab


<a href=”WEB URL” target=”new”> LINK TEXT GOES HERE </a>

5|Page
BASIC “BODY” TAGS CONTINUED:

Changing font color:

<font color= ”HEX NUMBER”>

Changing font size – choose from numbers 1, 2, 3, 4 or 5:

<font size= “NUMBER”>

Creating a heading:

Large heading: <h1> HEADING TEXT HERE </h1>

Smaller heading: <h2> HEADING TEXT HERE </h2>

Bulleted list:

<ul>
<li> LIST ITEM ONE </li>
<li> LIST ITEM TWO </li>
</ul>

Inserting images:

- Basic image <img src=”IMAGE URL”>


- Image with a border <img src=”IMAGE URL” border=”#”>
- Adjusting image size <img src=”IMAGE URL” width=”###” height=”###”>

6|Page
TABLES (FOR BODY SECTION):

<table cellpadding=”#” cellspacing=”#” border=”#”


bordercolor=”HEX CODE” bgcolor=”HEX CODE” width=”###” height=”###”>

<tr> <tr> = “table row”


<td> <td> = “table data” (cell)
YOUR TEXT HERE
</td>

<td>
YOUR TEXT HERE
</td>
</tr>

<tr>
<td>
YOUR TEXT HERE
</td>

<td>
YOUR TEXT HERE
</td>
</tr>

</table>

What are the dimensions of the above table? _____________ x ______________

7|Page
PUBLISHING TO THE WEB:

1. Publish to the web ONLY with the permission of an adult.


2. NEVER include personal information on your website.
3. Most hosts require an email address to sign up.

Safe, free web hosting:


http://www.webs.com
http://www.wix.com
http://www.weebly.com

RESOURCES:

http://www.lissaexplains.com
http://www.w3schools.com
http://www.codecademy.com
http://www.crunchzilla.com/code-monster

8|Page

You might also like