Presentation on theme: "There is a certain way that an HTML file should be set up. The HTML section declares a beginning and an ending. Within the HTML, there should be a HEAD."— Presentation transcript:
There is a certain way that an HTML file should be set up. The HTML section declares a beginning and an ending. Within the HTML, there should be a HEAD and a BODY. Within the head should be the SCRIPT. Each section starts with the section title and ends with a forward slash with the title.
Using the Font Tag The font designates a section of text to have certain attributes such as size and face. Both commands appear inside the tag as parameters. Each parameter is assigned to a value with an equal sign and a quote. There are other parameters to set as well. The coder can chose any number of available parameters to set.
The through commands are another popular way of making text appear at different sizes. They can also be set to have personalized attributes. Color, font type and size can be changed in the heading and then referenced easily throughout the document. A savvy user can create a professional look with the heading commands.
Adding Special Characters Some characters don’t appear easily on the web pages. Characters that are used as commands such as the less than and greater than signs can be tricky. Spaces are usually ignored. By using some special character designations, an author can get any character they want. See a list at www.w3schools.com/tags/ref_entities.asp www.w3schools.com/tags/ref_entities.asp and check out the examples such as for a space or < for a less than sign.
Html Basic Setup Using the Font Tag Using the - tags Adding Special Characters
Setting the Background Color Setting the background is an easy way to add style to the page. By adding parameters to the body command such as or the entire page will have a new look. The color can be any color the author can think of or even millions of colors designated by numerical values.
The color of the letters can be adapted to suit user needs by adding a color parameter to the font tag. This is some text! The color command can be in addition to other possible parameters such as size and face.
Setting the Highlight Color An author can also highlight the text with certain colors. This is a heading This can be applied to a heading or to a font. The style command is a powerful part of HTML that can also include many other options.
Many more colors are available in addition to the standard red, yellow, green and blue etc. More eclectic colors such as aqua and peach can also be used. Additionally, the computer can use math to indicate millions of colors and shades. Check out this web site to see some of them: www.w3schools.com/html/html_colors.asp
Review Setting the Background Color Setting the Font Color Setting the Highlight Color Using complex colors
Any of the pictures posted online can be placed on your web page. This is called line linking or hot linking. To do this, you find a full web link to a picture. Then, use it in the image command in this format: *remember, the spacing and extra lines are ignored*
Adding Locally Called Pictures Some times it is better to have the pictures on a web page to be in your controlled directory. Other sites can take measures to prevent you from using their pictures. Locally controlled directories enable an illustrator to edit the pictures. The tag is the same, except more simple because it refers to the local directory:
The link command is one of the first to developed on the World Wide Web. It is referred to by the tag. For example, to link a picture to the class web site, would be like this:
Organizing Pictures There are a few ways to organized pictures on a page to have them show up where you want. The size of the picture can be made congruent for multiple pictures. The pictures can be centered or shown on different lines. The following example centers, sizes and shows two pictures on different lines.
Adding Pictures Using Line Linking Adding Locally Called Pictures Placing Links on Pictures Organizing Pictures
Creating Your Own Tables Tables can be a great way to organize objects, pictures or text on a page. To declare a table, use the tag. To declare a row for the table, use the command. To show the different data in each row, use the command. A 3 by 3 table:
Some times you can get a nice bit of HTML code from online websites. Try going to html-tables.com or doing a search for HTML online table generator. Find one that suits your own style. It makes it easer to change the size of the different cells inside the table. By using an online HTML generator, anyone can make nice tables quickly.
Organizing Pictures With a Table After your table is set up, this would be a great place to put a collection of pictures. Put the picture using the tag as previously discussed. Place each image inside of the. Set all the pictures to be the same size so the table aligns with a professional look. Have each of the pictures go to a link to have a fast and appealing link to a large amount of information.
It is often a good idea to create a title at the top of each column of a table. For example, if you were to list your favorite foods, you would put “foods” at the top of the list. To create a table heading, use the tag instead of. Also, consider different sizes of borders to make the table you want. Header 1
Review Creating your own tables Using online table generators Organizing Pictures With a Table Adding a Table Heading
It is often a good idea to have a web page visitor be able to say who they are. By using the following setup on a form, a person can give their name, enter a password that is hidden text, and submit the data for processing. Then, we can have them sign a guest log or even send us money to purchase a product! First name: Last name:
Check Boxes Some times a customer or web user will want to select more than one thing. For example, they could buy a pizza on our web site and they can pay to have lots of extra toppings. Check out this online tool to see how it works for this and any other HTML example: www.w3schools.com/html/tryit.asp?filename=tryhtml _checkbox
Creating a Form With Buttons Using Radial Buttons Hidden and Shown Text Check Boxes