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=“ ” />
 List <ul>, <ol>, <dl>
 HTML Validator
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 (12.34.222.111) 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.
 URL – Stands for Uniform Resource Locator. It’s the
complete website. Example: http://www.dmacc.edu
 URL Structure:
Protocol://servername.domainname.suffix/path/filename
 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 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
 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 Filezilla
 Don’t forget Homework needs to have your comments
towards the top (in the head tag)
<!-Name
Tutorial #, Case Problem #
Date (the date you worked on it)
-->
FTPs and Filezilla
 Folder Structure and Paths
 Blackboard - Course Content -Turning in Your
Homework :
 Pathnames_handout.pdf ,
 Fileorghandout Larry.pdf
FTPs and Filezilla
C: ---- documents or where ever you want
FTP transfer Only what is in the box
WDV101

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 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
• Download Filezilla (Client version)
https://filezilla-project.org/
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
 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 Links
 Linking to Non-HTML Files
<a href=“example.xlsx” > Grades </a>
 Email Links – Use mailto:
<a href=mailto:”emailaddress” >Email </a>
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 Links
 Linking to local links
 <a href=“filename”>linktext </a>
<a href=“page2.html”> Page 2 </a>
Creating Image Link
 Image Links – Nest an Image tag in between the
Anchor tag
<a href=“filename “> <img src=“” /> </a>
<a href=“filename “> <img src=“ ” /> </a>
A thumb nail image
Any of the previous links. i.e. mailto, another web site,
the web, a larger image, etc.
Lab
 Create a new page – page1.html
1. Add a Link to www.dmacc.edu
2. Create a 2nd page (page2.html)
1. Link firstpage to page2
2. Link page2 back to firstpage
3. Create an internal link
1. Create a section at the top
2. Add break points to give space
3. Create a link at the bottom to move to the top
4. Create a email link