CIS 204 Intro to Website Development

Tutorial #2 Creating Links

Tutorial #1 ReviewBasic 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 – TermsProtocol – A standard for sending and

receiving dataWeb uses HTTP Hypertext Transfer ProtocolEvery 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.eduURL Structure:Protocol://servername.domainname.suffix/path/filename

HTTP – Protocolwww – 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 nameThere is no path in this case because the main page is

located at the root.

The Index pageThe main page of a site is usually named

index.html or default.htmlWhen you give the browser the URL it will load

indexhttp://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 FilezillaEveryone will have server space and a FPT

account for this classHomework will be uploaded to your personal

siteQuizzes, In Class Labs, Homework, and Final

will all go thereFilezilla will be used to upload the files (using

FTP)

FTPs and FilezillaDon’t forget Homework needs to have your

comments towards the top (in the head tag)

<!-- NameTutorial #, Case Problem #Date (the date you worked on it)

-->

FTPs and FilezillaFolder Structure http://www.dmaccwebdev.org/

:

CIS204Last Name

Homework T1C1.html* T1C2.html

Final Quizes Labs

Rename homework files to format T#C#.html where T# is the tutorial and C# is the case.

FTPs and Filezilla• Use Filezilla to create and save a

connection to your site• Create the folder structure (Homework,

Final, Quiz, and Labs)

FTPs Filezilla Lab• Download Filezilla (Client)https://filezilla-project.org/

• Take firstpage.html from class #1 and upload it to the labs folder

• Using web browser navigate to your page.

Creating LinksThe Anchor element: <a> </a>Attributes

hrefTitle attribute used for a screen tip.

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

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

Creating LinksLinking to Non-HTML Files<a href=“example.xlsx” > Grades </a>

Email Links – Use mailto:<a href=mailto:”emailaddress” >Email </a>

Creating LinksLinking 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 LinksLinking to local links<a href=“filename”>linktext </a>

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

Image Links – Nest an Image tag and Anchor tag

<a href=“filename “> <img src=“” /> </a>

LabCreate a new page – page1.html1. Add a Link to www.dmacc.edu2. Create a 2nd page (page2.html)

1. Link firstpage to page22. Link page2 back to firstpage

3. Create an internal link1. Create a section at the top2. Add break points to give space3. Create a link at the bottom to move to the top

4. Create a email link