Atherton Technology
Professional Group Website
Welcome to Programming Websites
I hope you all are enjoying coding websites with HTML and CSS.
Now you can create your own website!
Intro to HTML Tags & Commands
- <body>
Begins the visible part of a webpage.
- <h1> - <h6>
Heading sizes One through Six create bold lettering of larger size compared to paragraph text.
- <br>
Creates a blank line on the page. Like this...
- <p>
Begins a paragraph for large amounts of text. This text is inside a paragraph tag.
- <em>
Makes text you put between the tags italics.
- <strong> or <b>
Makes text you put between the tags bold.
- <ol>
- Begins a numbered or ordered list.
- <ul>
- Begins an unordered list.
- <li>
Tag to add content inside of a ordered or unordered list.
- <img src="">
Loads an image onto the webpage. Images can be uploaded to hosting site
or the URL can be copied from another page on the Internet.
NOTE:Use the exact URL for the image, not a search engine URL.
- alt=
Will display text when image will not load. Necessary for hearing-impaired users.
- width=
Sets the width of an image or object.
- height=
Sets the height of an image or object.
Note:It is recommended to only set the width or height of an image,
as the browser will proportion the image so that it is not stretched or squished.
Intro to CSS Tags & Commands
- style{}
Must be in the head. Necessary when adding preloaded CSS code (the look or style) of a webpage.
- color:
Used in the style brackets. Changes the color of the text of the object assigned.
- background-color:
Used in the style brackets. Changes the background color of the text or object assigned.
- rgb(1-255, 1-255, 1-255)
Changes the specific amount of RED, GREEN, and BLUE, in which each number can be between 1 and 255.
- #id {}
Used in the style brackets to assign attributes to specific id.
- id=""
Used inline to assign a tag a specific id.
- .class{}
Used in the style brackets to assign attributes to specific class.
- class=
Used inline to assign a tag a specific class.
Note:When assigning a tag use a # before the name. When assiging a class use a . before the name.
When assigning an id, use "". When assigning a class, DON'T use "".
More HTML Tags
- <a href="">
Links to other website or part of current page.
- <target="_blank">
Put inside <a> tag & opens link in new window.
- <!--Comments-->
Create comment for coders. Will not show up on webpage.
- <table>
Tag to begin a table.
- <thead>
Begins your headings.
- <tr>
Indicates a new row in a table.
- <th>
Creates a heading style for text in table.
- <tbody>
Begins the main body of a table.
- <td>
Creates data or information to go into heading columns.
Here is an example of a basic table.
| Meal |
Ingredients |
Price |
| Spaghetti |
Noodles and sauce |
$12.99 |
| Meatloaf |
Meat, stuff, and ketchup |
$2.99 |
| Toast |
Bread |
$120 |
CSS Text Properties
- font-family
Sets font to text. Examples(Serif, Sans-Serif, Monospaced, Fantasy, Script).
Note:You can set specific fonts like Times New Roman,
but a page should always be coded with a back up font family in case a users computer does not support the specified font.
Ex. (Times New Roman, Times, serif;)
- font-size
Changes the size of the font. Uses px(pixels) or em(emphasis). Examples w/pixels (Ten, Twenty, Thirty)
- font-weight
Controls the weight or boldness of text. Used in the <style> tag.
This is using font-weight=bold;
- font-style
Changes text between
normal
italic
oblique
- font: style size family
All-in-one font modification. This is oblique 30 fantasy.
- line-height
Controls the space between lines.
This is 7% between lines.
This is 7% between lines.
This is 200% between lines.
This is 200% between lines.
- text-align
This text is left aligned.This text is center aligned.This text is right aligned 10%.
- text-decoration
Removes the underline from a link. Used in style tag. Example:
a {text-decoration: none;}
- sizes: px (pixels); em ( * size of set standard)
This size is 80 px.
This is 1.5em.
More CSS Selectors
- padding
Adds space on top, left, right, and bottom of an object.
Example: padding-top(15px), padding-right(25px), padding-bottom(50), padding-left(80)
- border
Adds border to selected objects.
dotted
dashed
solid
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
A mixed border.
- <span>
Groups together text to change properties. Use classes and id's.
- <div>
Groups specific objects together.
- Paragraphs
- Lists
- Images
- Headings
- Et cetera
Links to HTML & CSS Resource Websites
Created by Zachary Colston