HTML Lesson 3.


96 views
Uploaded on:
Category: Product / Service
Description
HTML Lesson 3 TBE 540 Farah Fisher Essentials Utilize a web crawler to find data. Download illustrations from the web. Characterize GIF, JPG and "animated GIF". Use basic representation instruments to make/control illustrations. Control the size and situation of representation.
Transcripts
Slide 1

HTML Lesson 3 TBE 540 Farah Fisher

Slide 2

Prerequisites Use a web search tool to find data. Download illustrations from the web. Characterize GIF, JPG and "animated GIF". Use straightforward representation instruments to make/control design. Control the size and position of representation. Exhibit proper utilization of the accompanying HTML label classes: obliged labels, pictures, records, hues, content sizes, lines

Slide 3

Objectives Create connected site pages. Utilize a rundown (content) of connections. Use design as foundation and connections. Place content beside pictures in no less than two arrangements. Utilize a realistic as a substitute to <HR>. Find and utilization site page assessment rubrics.

Slide 4

More about Links Virtually every site page has links…it’s the fundamental thought of the web and HTML ( H yper T ext alludes to interfaces). Connection labels resemble this: <A HREF=“address”>what to click on</A> The location can be a document name (like home.htm) or a web location (like http://www.csudh.edu/fisher/)

Slide 5

More about Links The “what to click on” is all the time content. Whatever is put between the <A> labels is shown on the screen and typically underlined (however you can transform it in your program settings). You can likewise put a < IMG> tag between the <A> labels, making the picture into a connection. A gift on connections is accessible at http://www.csudh.edu/fisher/tbe540/HHO3.htm

Slide 6

More about Links The sample beneath demonstrates a picture called TOY.JPG as a connection to a page called TOYSTORY.HTM : <A HREF=“TOYSTORY.HTM”> <IMG SRC=“TOY.JPG”></A> The <IMG> label might likewise contain HEIGHT, WIDTH, and BORDER data. Along these lines, be that as it may, the client won\'t realize that the picture is a connection. See the following slide for a superior thought.

Slide 7

More about Links In the sample beneath, both the picture TOY.JPG and the words “GO TO TOY STORY” are a join\'s piece to TOYSTORY.HTM. <A HREF=“TOYSTORY.HTM”>GO TO TOY STORY <IMG SRC=“TOY.JPG”></A> The words in the connection can precede or after the <IMG> tag. Situation of content by pictures will be talked about later in this lesson.

Slide 8

More about Links Sometimes it is advantageous to have a rundown of connections. See the case underneath: <UL> <LI><A HREF=“http://www.csudh.edu/”>CSUDH </A></LI> <LI><A HREF=“http://www.csudh.edu/coe/>” College of Education </A></LI> <LI><A HREF=“http://www.csudh.edu/fisher”> Dr. Fisher’s Classes</A></LI> </UL>

Slide 9

More about Graphics When setting content by representation, you may be astounded by the content\'s position. On the off chance that you put in no “alignment” data, the content will show up at the realistic\'s base: Text shows up here

Slide 10

More about Graphics Using ALIGN=TOP or ALIGN=CENTER may be more valuable. <IMG SRC=“ED.GIF” ALIGN=TOP>Text shows up here <IMG SRC=“ED.GIF” ALIGN=CENTER>Text shows up here Text shows up here Text shows up here

Slide 11

More about Graphics can be utilized a site page foundations. The label <BODY BACKGROUND=“image name”> is utilized. A realistic utilized as a part of the foundation of a page ought to be helped so it doesn\'t meddle with the data on the page.

Slide 12

More about Graphics When a picture is littler than the website page, it is “tiled” (rehashed) to top off all the space. A solitary realistic like this: would resemble this as a foundation:

Slide 13

More about Graphics To help a realistic, you will require a project like PhotoShop or Word (or a freeware or shareware program). In the event that you cut down the complexity and raise the shine, the realistic will seem “washed out” - simply ideal for a foundation. A sample:

Slide 14

More about Graphics Another utilization for representation is as a substitution for <HR>. You can hunt down web realistic lines (“dividers”) at sites like http://www.nzwwa.com/mirror/clipart/design/dividers/dividers1/index.html (some piece of Clip Art Universe) Use a consistent <IMG> tag to show the realistic line. You may need to change the width (<IMG SRC=“file” WIDTH=100%>)

Slide 15

Self Check - HTML Lesson 3 Which of the clicking so as to accompany makes a connection to HOME.HTM GO HOME? <A HREF=“GO HOME”>HOME.HTM</A> <A HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“GO HOME”>HOME.HTM</A>

Slide 16

Self Check - HTML Lesson 3 Which of the clicking so as to accompany makes a connection to HOME.HTM GO HOME? <A HREF=“GO HOME”>HOME.HTM</A> <A HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“GO HOME”>HOME.HTM</A>

Slide 17

Self Check - HTML Lesson 3 Which of the accompanying permits the client to tap on GO HOME or a realistic (home.jpg) to go to HOME.HTM? <A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A> <A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A> <A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A>

Slide 18

Self Check - HTML Lesson 3 Which of the accompanying permits the client to tap on GO HOME or a realistic (home.jpg) to go to HOME.HTM? <A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A> <A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A> <A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A> {Either design first or words first}

Slide 19

Self Check - HTML Lesson 3 Which of the rundowns underneath will comes about because of these labels? <OL> <LI><A HREF=“MINE.HTM”>See Me</A></LI> <LI>GO AWAY!</LI> </OL> See Me GO AWAY! See Me GO AWAY! See Me GO AWAY!

Slide 20

Self Check - HTML Lesson 3 Which of the rundowns underneath will comes about because of these labels? <OL> <LI><A HREF=“MINE.HTM”>See Me</A></LI> <LI>GO AWAY!</LI> </OL> See Me GO AWAY! See Me GO AWAY! See Me GO AWAY!

Slide 21

Self Check - HTML Lesson 3 Which is the right content arrangement if this tag is utilized? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK! SINK! SINK! SINK!

Slide 22

Self Check - HTML Lesson 3 Which is the right content situation if this tag is utilized? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK! SINK! SINK! SINK!

Slide 23

Self Check - HTML Lesson 3 To utilize a realistic (back1.gif) as a page foundation, use… <BODY BACKGROUND=“back1.gif”> <BODY><IMG SRC=“back1.gif”></BODY> <BODY BGCOLOR=“back1.gif”> You can\'t utilize a realistic as a foundation.

Slide 24

Self Check - HTML Lesson 3 To utilize a realistic (back1.gif) as a page foundation, use… <BODY BACKGROUND=“back1.gif”> <BODY><IMG SRC=“back1.gif”></BODY> <BODY BGCOLOR=“back1.gif”> You can\'t utilize a realistic as a foundation.

Slide 25

Self Check - HTML Lesson 3 If a foundation realistic is littler than the page display… The picture is shown bigger to fill the window. The picture is focused on the page window. The picture is tiled (rehashed).

Slide 26

Self Check - HTML Lesson 3 If a foundation realistic is littler than the page display… The picture is shown bigger to fill the window. The picture is fixated on the page window. The picture is tiled (rehashed).

Slide 27

Self Check - HTML Lesson 3 To utilize a picture (lineup.gif) as a line, utilize the accompanying tag(s)… <HR><IMG SRC=“lineup.gif”></HR> <IMG SRC=“lineup.gif”> <HR SRC=lineup.gif”> <HR>lineup.gif</HR>

Slide 28

Self Check - HTML Lesson 3 To utilize a picture (lineup.gif) as a line, utilize the accompanying tag(s)… <HR><IMG SRC=“lineup.gif”></HR> <IMG SRC=“lineup.gif”> <HR SRC=lineup.gif”> <HR>lineup.gif</HR>

Slide 29

Evaluation Rubrics One of the necessities for the HTML task is that you utilize a rubric to assess your own particular site when it is finished. Taking a gander at rubrics now will caution you to what is essential in web outline. Look at the Web Evaluation Links

Recommended
View more...