Utilizing HTML and JavaScript to Create Sites.

1890 days ago, 509 views
PowerPoint PPT Presentation
Google pushes the most mainstream site to the top. A prevalence pointer: The quantity of ... free devices for meta label era, positioning apparatus, movement correlation ...

Presentation Transcript

Slide 1

Utilizing HTML and JavaScript to Develop Websites. Setting up Your Website

Slide 2

What we will take a gander at: Optimizing your webpage for web crawlers Miscellaneous HTML points Using Image maps Linking inside a page

Slide 3

Competency Objectives Understand how web indexes function Understand how to set up picture maps Learn how to connect inside a page Competency Alert: You have to know this ! Basic Problem Area! Individuals appear to overlook this

Slide 4

Search Engines Search motor – A webpage that permits you to hunt the web down stuff Typically has web a back-end database with recorded watchwords Has a unique program (called a robot, crawler or bug) that takes after connections and find mainstream destinations Creates lists or hunt terms down website and puts into DB Google was worked at Stanford University Originally had 3-4 parallel "bugs" ordering around 100 pages/second. How google Is distinctive Google pushes the most well known site to the main A prominence pointer: The quantity of mainstream locales that connection back to your site yahoo.com and msn.com are next most famous destinations.

Slide 5

Some things to check Has your site been listed by google? Attempt seek term: site:yourdomain.com 9 pages have been filed from webwizard.awl.com 7,790 pages have been ordered from www.depaul.edu

Slide 6

What do they list? Move internet searchers tweak/upgrade their calculations occasionally. Every web crawler has its own particular file strategy: Altavista may file all substance of your website Others may get catchphrases from your substance Based on <title>, <img alt=xxx>, <H1> label content. Different destinations may utilize Meta Tags Engines that seem to utilize Meta labels: AltaVista, Direct Hit, Excite, HotBot Sites that don't seem to utilize Meta Tags : Google?, lycos. Yippee?

Slide 7

Using Meta labels . . . Competency Alert: You have to know this ! A meta tag is: A discretionary HTML labels used to depict your webpage <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="TITLE" CONTENT="Hands-on Web Development Training Courses"> <META NAME="DESCRIPTION" CONTENT="Hands-on Training Courses Perl, PHP and MySql,and Website development"> <META NAME="KEYWORDS" CONTENT="Web Site Design, Perl Training, Learning Perl, PHP course, IT course, Perl course, PHP course, hands-on IT training"> Perhaps most vital meta tag. Incorporate a key particular inquiry string. May be utilized when an internet searcher demonstrates list items. Put most critical catchphrases first and keep under 40 characters. Put some catchphrases to attempt to "help" the web crawlers. Still they may infer the watchwords in view of site's substance.

Slide 8

How else would you be able to "help" the web indexes? Ensure your inquiry terms are in the substance of you landing page. For instance, may need 'hands-on preparing' inside the substance Reciprocal connecting – You may need to: Establish a page that welcomes individuals to trade joins with your site. Seek locales in a comparable fields that you ask for a corresponding connection (that is, you connection to them and they connection to you.) Google judges a destinations ubiquity by number of destinations that connection to it. Thusly numerous destinations equal connecting programs.

Slide 9

Reciprocal Linking Some locales will keep a "supporters" or "references" page Basically try to trade joins Sites they've likely effectively traded with Seek to trade joins

Slide 10

What Help Is there ? There are numerous organizations in the website streamlining business One webpage is http://www.evrsoft.com/http://www.evrsoft.com has free devices for meta label era, positioning apparatus, movement correlation programmed web crawler submit instrument, and hunt term checking device.

Slide 11

What we will take a gander at: Optimizing your website for web indexes Miscellaneous HTML points Using Image maps Linking inside a site page

Slide 12

Building Image Maps You can isolate up any picture into areas and have each extraordinary locale connection to better places. Imagemaps - a page picture that has more than 1 interface on it. Contingent on where you click you connection to better places.

Slide 13

A picture outline the picture up Top show picture with 2 of the different pieces Here two or three pictures are set together to look like 1 picture.

Slide 14

Manually making a picture outline. You could utilize a photograph altering device Cut picture into pieces and show alongside one another. <body vlink="white"> <A Href=webdeisgn_syllabus.html> <img SRC="part1.JPG" height=221 width=176 border="0" ALT="GoTo Syllabus"></A> <A Href=website_index.html> <img SRC=part2.JPG height=221 width=116 border="0" ALT="Goto Index"></A> <A final_project.html> <img SRC="part3.JPG" height=219 width=143 border="0" ALT="Goto Final Project"></A> <A HREF="website_index.html"> <img SRC="part4.JPG" height=218 width=258 border="0" Alt="Goto Index"></A> <BR> </body> Show this picture as a hot connection, when clicked go here Note: determining the tallness and width of picture, helps program to save space for picture while downloading.

Slide 15

Disadvantages of manual strategy . . . Couple of impediments with manual picture outline: to utilize a paint program to control picture Need to ensure they show legitimately. Confined to the sorts of pictures you can remove (like rectangles or squares.)

Slide 16

Image maps . . . You can utilize picture maps to indicate interactive areas of a customary picture. Can indicate Rectangles – need to know pixel directions of upper left corner and lower right corner of every rectangle Circles Polygons. Upper right corner of every territory The lines here are for delineation purposes as it were. Bring down left corner of every territory

Slide 17

How to discover pixel arranges? Can utilize a picture altering program . . . - mspaint, paint-shop genius or Gimp work fine Could move cursor over picture to decide pixel area As put cursor here, the pixel area appear here in mspaint Note: mspaint can be begun in XP by going to begin >run and entering mspaint

Slide 18

Record the pixel area Record every upper left and lower right pixel area Rectangle 1 "0, 0, 137, 82"   Rectangle 2 "171, 62, 242, 84" Rectangle 3 "263, 59, 348, 86" Rectangle 4 "359, 53, 453, 107" Rectangle 5 "458, 49, 566, 108" Upper left organize Lower right facilitate

Slide 19

Defining the picture outline . . Characterize the name of picture guide to utilize  <html> <head> <title>A Manual Image Map</title></head> <body vlink="white" alink="white" vlink="white" > <img src ="Labselect.jpg" usemap="#navigate" border=0> <map id ="navigate">   <AREA SHAPE="rect" COORDS="0, 0, 137, 82" alt="lab1" href="Lab1.html">   <AREA SHAPE="rect" COORDS="171, 62, 242, 84" href="Lab2.html">   <AREA SHAPE="rect" COORDS="263, 59, 348, 86" href="Lab3.html">   <AREA SHAPE="rect" COORDS="359, 53, 453, 107" href="Lab4.html">    <AREA SHAPE="rect" COORDS="458, 49, 566, 108" href="Lab5.html"> </MAP> Define picture outline explore. (name is old style tag reqd by a few programs). Utilize the territory tag to determine the shape, organizes, and interface for each interactive range

Slide 20

Creating circles and polygons Two different shapes you can make: circle – indicate the inside x, focus y and the hover span (in pixels). <area href="stuff.html" shape="circle" coords="95,75,65"> polygon – determine the x and y arrange of every point in polygon <area href="stuff2.html" shape="poly" coords="300,70,300,200,165,250" >

Slide 21

Creating Image Maps Within XP, can utilize mspaint to make Start by begin >run and enter mspaint Set picture measure by picture - > characteristics Set traits from picture choice

Slide 22

Creating boxes on picture Can fill picture with fill instrument and select a shading at base Boxes can be attracted utilizing box apparatus To copy box, goto alter >select all, select box, and duplicate and glue the container. Drag it where you need

Slide 23

Putting Text on Image Use the textual style apparatus to include content Change the size and style of content When sparing picture, ensure it's a gif or jpg

Slide 24

Getting the directions Record the directions of every container you need interactive

Slide 25

What we will take a gander at: Optimizing your website for web indexes Miscellaneous HTML subjects Using Image maps Linking inside a site page

Slide 26

Linking inside a page We discovered that we can connection to a page with <a href=http://www.mypage.com> mypage </a> This opens the program to the TOP of the page at www.mypage.com Sometimes need to open to a particular area in page. At the point when snap here, connection opens up in focal point of page Note scroll bars about ½ down page

Slide 27

Creating joins inside a page To make a connection inside a page 1. Discover the spot inside the page you need to connection to: 2. Characterize a name for that place: <A NAME="Bird"></A> 3. Presently you can make a connection to that spot with: <A HREF="#Bird">Click Here</A> to goto Bird Section. </A> OR <A HREF="mysite.com#Bird">Click Here</A> to goto Bird Section. </A> If area inside another page. Characterizes a name or bookmark for that area

Slide 28

For instance, Suppose have 2 pages, page1.html and page2.html