wdv 101 intro to website development n.
Skip this Video
Loading SlideShow in 5 Seconds..
WDV 101 Intro to Website Development PowerPoint Presentation
Download Presentation
WDV 101 Intro to Website Development

Loading in 2 Seconds...

play fullscreen
1 / 17

WDV 101 Intro to Website Development - PowerPoint PPT Presentation

  • Uploaded on

WDV 101 Intro to Website Development. Tutorial #2 Creating Links. Tutorial #1 Review. Basic Page (DOCTYPE, HTML, Head, Title, Body) Tags Structure(<> </>) <h1>, <p>, < br />, <meta>, < img >, < strong>, < em > Nested Tags <tag1><tag2>content</tag2></tag1> Tag Attributes < img src =“ ” />

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

WDV 101 Intro to Website Development

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
wdv 101 intro to website development

WDV 101 Intro to Website Development

Tutorial #2 Creating Links

tutorial 1 review
Tutorial #1 Review
  • Basic Page (DOCTYPE, HTML, Head, Title, Body)
  • Tags Structure(<> </>)
  • <h1>, <p>, <br/>, <meta>, <img>, <strong>, <em>
  • Nested Tags <tag1><tag2>content</tag2></tag1>
  • Tag Attributes <imgsrc=“ ” />
  • List <ul>, <ol>, <dl>
  • HTML Validator
tutorial 2 terms
Tutorial # 2 – Terms
  • Protocol – A standard for sending and receiving data
  • Web uses HTTP Hypertext Transfer Protocol
  • Every computer has an Internet Protocol address (IP Address)
  • The IP Address identifies the computer in 0-255 numbers separated by dots ( DOS :/>ipconfig
  • Domain Name System or DNS refers to web sites by web server name instead of number.
  • Domain name is followed by suffix (.com, .net, .edu, etc). Also called Top-Level Domain Name
tutorial 2 terms cont
Tutorial # 2 – Terms Cont.
  • URL – Stands for Uniform Resource Locator. It’s the complete website. Example: http://www.dmacc.edu
  • URL Structure:


    • HTTP – Protocol
    • www – Server Name (World Wide Web)
    • dmacc – Domain Name (Nave of the domain where web server resides)
    • .edu – Suffix
    • /index.html (hidden in this case) – file name
    • There is no path in this case because the main page is located at the root.
the index page
The Index page
  • The main page of a site is usually named index.html or default.html
  • When you give the browser the URL it will load index
    • http://www.dmacc.edu most likely has a file on the server called index.html.
  • .HTML vs .HTM
    • Personal Preference (but try to stay consistent)
    • Back in the day extensions where 3 letters so .htm was used.
    • A case could be made that the L is redundant as other languages do not have the L (.java, .js, .cpp, etc)
ftps and filezilla
FTPs and Filezilla
  • Everyone will own their own server space , domain name, and FPT account for this class
  • Homework will be uploaded to your personal site
  • Quizzes, In Class Labs, Homework, and Final will all go there
  • Filezilla will be used to upload the files (using FTP)
ftps and filezilla1
FTPs and Filezilla
  • Don’t forget Homework needs to have your comments towards the top (in the head tag)



Tutorial #, Case Problem #

Date (the date you worked on it)


ftps and filezilla2
FTPs and Filezilla
  • Folder Structure and Paths
    • Blackboard - Course Content -Turning in Your Homework :
        • Pathnames_handout.pdf ,
        • FileorghandoutLarry.pdf
ftps and filezilla3
FTPs and Filezilla

C: ---- documents or where ever you want

FTP transfer Only what is in the box


      • Homework (folder)
        • T1C1.html*
        • T1C2.html
      • Final (folder)
      • index.html
      • Images (folder)
      • Labs
  • **File Structure Must be the same on PC and Server **
ftps and filezilla4
FTPs and Filezilla
        • Rename homework files to format T#C#.html where T# is the tutorial and C# is the case.
  • Create the folder structure (Homework, Final, Labs and Images)on you PC
  • Use Filezilla to create and save a connection to your site
ftps filezilla lab
FTPs Filezilla Lab
  • Download Filezilla (Client version)


NOTE: select all users when given choice

  • Use Filezilla to create and save a connection to your site
  • Take firstpage.html from class #1 and upload it to the Labs folder
  • Using web browser navigate to your page.
creating links
Creating Links
  • The Anchor element: <a> </a>
  • Attributes
    • href
    • Title attribute used for a screen tip.

<a href=“URL” title=“pop up text”> Clickable Link </a>

Where you want to go

What you see before click

<a href = “http://www.dmacc.edu” title=“DMACC”> DMACC </a>

creating links1
Creating Links
  • Linking to Non-HTML Files

<a href=“example.xlsx” > Grades </a>

  • Email Links – Use mailto:

<a href=mailto:”emailaddress” >Email </a>

creating links2
Creating Links
  • Linking to a Specific Section
    • Needs section and link

<section id = “idvalue”>content </section>

<a href=“#idname”> linktext </a>

<section id=“top”> </section>

<a href=“#top”>Top of Page </a>

creating links3
Creating Links
  • Linking to local links
  • <a href=“filename”>linktext </a>

<a href=“page2.html”> Page 2 </a>

creating image link
Creating Image Link
  • Image Links – Nest an Image tag in between the Anchor tag

<a href=“filename “> <imgsrc=“” /> </a>

<a href=“filename “> <imgsrc=“ ” /> </a>

A thumb nail image

Any of the previous links. i.e. mailto, another web site, the web, a larger image, etc.

  • Create a new page – page1.html
  • Add a Link to www.dmacc.edu
  • Create a 2nd page (page2.html)
    • Link firstpage to page2
    • Link page2 back to firstpage
  • Create an internal link
    • Create a section at the top
    • Add break points to give space
    • Create a link at the bottom to move to the top
  • Create a email link