your source for html help

Week 2 Recap -HOSTING A WEB SITE- 01/31/2018

Firstly, we needed to buy an URL or Domain to work off. Because a website must be hosted on a web server the next step was to rent space for a webserver.

Week 3 Recap -INTRO TO HTML- 02/07/2018

HTML stands for Hyper Text Markup Language. Basically giving the browser instructions on how you want the web page to look.

HEAD <head></head>: The head section is not seen by the viewer ecept for what is in the title section (<title></title>). The title section shows on the top in the tab portion of the site.

DIV <div></div>: a div tag is like a place holder that wil allow you to mess with that section and adjust as need be.

Week 4 Recap -HEADINGS AND LISTS- 02/14/2018

HEADINGS <h#></h#>: can very in size. Specifically 6 different sizes. If you want a larger heading you put a smaller number and if you wanter a smaller heading you put a larger number.

LISTS:

  1. ORDERED lists (<ol> and </ol> followed by each thing under starting and ending with <li> and </li>) This list will give you a list numbered in order. If at any point you want the list to start at a different number aside from one you would start your html with: < ol start="#" > and replace # with the number you want to start the list with. However this type of list can also be manipulated to roman numeral number, greek, or even alphabetical ordering.

  2. UNORDERED lists (<ul> and </ul>followed by each thing under starting and ending with <li> and </li>) This list is reflected with bullet points that can be discs, squares, and circles. You may also NEST a list within another to form sub categories.

  3. DEFINITION lists (<dl> and </dl> followed by each 'word' starting and ending with <dt> and </dt> the 'definition' will then be with <dd> and </dd> )

<pre></pre> = allows you to type in html and it to reflect on the web page with the same indents and spaces etc.
The below formatting has been done with out using any <br> rather simply using <pre></pre>
     test
     test
     
     
     
     test
     
Back to the top s

Week 5 Recap -CASCADING STYLE SHEETS (CSS)- 02/21/2018

STYLESHEETS contain the rules about the style and formating of the page you view. In order to tell the browser what part of the page you want styled you must use a 'selector'. Types of selectors:

  • ELEMENT SELECTOR
    • This allows you to add a design to all items labeled the same. For example if you write:
      p {text align: center;} then ALL you paragraphs will reflect a center alignment.
      NOTE: if you need to apply the same rule to multupile things and want to limit coding you can seperate each by a comma// EX: p, h1, h2 {text align: center;}
  • CLASS SELECTOR
    • This allows you to add a design to a specific class and this time you will start your rule with a '.' :
      .center {text align: center;} now only those by the name class will be center. If you only want paragraphs with class center to be centered then you would use: p.center {text align:center;}
  • ID SELECTOR
    • This allows you to add a design to a specific area and this time you will start your rule with a '#':
      #firstparagraph {text align: center;} now only the first paragraph will reflect a center alignment.

The rules for styling the selector are contained within curly brackets ({}) surrounding the property:value info to seperate mutliple rules within the selector one must use (;). Note: if there are spaces within a rule make sure to include "".

INLINE STYLESHEETS:
This type is often used to make quick/ local formating changes to small portions. <span></span> = encloses small portions of content so you can add style to a single word as need be as we did to the previous word "small".

EMBEDDED STYLESHEETS:
This type of stylesheet is located in the <head> section within <style></style>

EXTERNAL STYLESHEETS:
This type of a style shee is <link>-ed to the page with a tag. The style sheet will have the end file name as '.css" HTML tags do not apply in an external style sheet only style rules. There is also the option to add comments by typing between " /* and */ ".

Back to the top

Week 6 Recap -IMAGES- 02/28/2018

HTML

There are three types of images:

  • JPG or JPEG: Some detail may be lost to to reduce file size…best for photographs or real-world scenes. (16 million colors)
  • GIF: Does not lose detail when compressed…best for line art, cartoons, lettering and other images with sharp edges. (256 colors)
  • PNG (Portable Network Graphics): This type was designed to replace GIF. It tends to compress better than GIF in almost every case.

To add an image you would use: <image> which is self closing and does not require an end tag. In this tag you would also have to name the location the image is stored that you are looking to inlcude by naming the folder and '/ '. The width and height can also be included in the tag itself or within your CSS file. Adding an "alt and title" is also wise so that when your user hovers over the image it will give a quick discription of the image. All above instruction examples are listed in html format below:
<img src="images/examplepicture.jpg" width="425" height="282" alt="Example Picture" title="Example Picture">

Back to the top

Week 7 Recap -GIMP- 03/07/2018

GIMP is a free alternative to photo shop. You have the ability to save all layers within the image by saving it as a ".xcf file".

Back to the top

Week 8 Recap -LINKS- 03/21/2018

Links can either be hypertext or images.

  • External Link: Connects to another page or file on another webs site.
  • Internal Link: Connects to a page or file on the current web site.
Anchor Tag
Command used for links with the reference of ‘href’. It would fit in the below template for an external link:
<a href= "LINK OF SITE WITH HTTP://" > NAME OF TEXT THAT WILL DISPLAY HYPERLINK </a >

Opening Pages in a New Window
By default opening a page will replace the current page that you are on. In order to prevent this a "target attribute" is used. This means in your commands in between the the link and the name you would add: target="_blank"

Link Styles
DEFAULT:
Before click= Blue
After click= Magenta
Hover= NO default color
Active= NONE default will appear as ‘after click’ aka magenta

The rules are reflected as in the < head > section:

< style type="text/css">
<!--
a:link {color:#0000FF;}
a:visited {color:#FF00FF;}
a:hover {color:#00FF00;}
a:active {color:#FF0000;}
-->
</style>

You also have the ability to link within the same page. For example if you want to give the user the option to go back to the top of the page without having to scroll you can add a link to return back to their start. To do so you would use:
<a name="HOME" id="HOME"> </a>

Back to the top

Week 9 Recap -Responsive Web Design (RWD)- 03/21/2018

Responsive web design refers to web pages that are designed to respond to the size that they are displayed on. However, pictures are an exception- pictures will not automatically adjust their size; rather you must tell the page to adjust the size in the stylesheets. The best was to do this is by adding a percentage for the width.
The three types of screens we are trying to display are: large screen(laptop or desktop), medium screen (tablet or iPad), and small screen (smart-phone).

Navigation Bar
In simplest terms this helps your user navigate your website easily.

Breadcrumbs
This is another to simplify the user’s use. This technique allows a tracking of how a user got to the current page that they are on.

Back to the top

Week 10 Recap —Tables 04/04/2018

Below is the most basic html for inserting a table.
TR=row
TD=data cell/columns

<table>
<tr>
<td>
Some content for this cell
</td>
</tr>
</table>
** by default your table will not reflect borders… you must add this in your CSS

Back to the top

Week 11 Recap —CSS Positioning 04/11/2018

The CSS box model is basically the padding and borders and margins of how your web page is defaulted.

Back to the top

Week 12 Recap —Forms 04/25/2018

FORMS= allow you to get information from users.
To do so you use the tag: < form > with a closing tag of </form>
CONSTRUCTING THE FORM:
We will be using the input tag. You will need to place a "type" for each tab so the site knows how to use the tag. For example if we need to create an entry for the user to enter their name we would enter the type as: text. You also have the option to limit the amount of text that can be entered. This limits the characters from perhaps being to wordy and encourages the user to get to the point. You even have the option to add a password. This could be used if you are trying to get information from only a select few users.
Your form is definitely going to need a submit. How to add one? Thats what we are here for! To add a submit button you will use:
<input type= "submit" value="Insert text you want to show users">

Back to the top

Week 13 Recap —Multimedia 05/02/2018

In order to add any form of media to your site such as an audio file or video you would need to use a special tag. For audio it would be: <audio> and for video: <video>.

In order to allow the user to have a choice to play or not play the media without it automatically doing so itself you would need to add the wording "controls" in your tag. This will provide controls for the user to adjust. Just like when posting images you will need to tell the coding the source and where it can be found.

Back to the top