WDV 101 Intro to Website Development

1. WDV 101 Intro to Website Development Tutorial #2 Creating Links

2. 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

3. 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

4. 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.

5. 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)

6. 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)

7. 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) -->

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

9. 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 **

10. 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

11. 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.

12. 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>

13. Creating Links • Linking to Non-HTML Files <a href=“example.xlsx” > Grades </a> • Email Links – Use mailto: <a href=mailto:”emailaddress” >Email </a>

14. 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>

15. Creating Links • Linking to local links • <a href=“filename”>linktext </a> <a href=“page2.html”> Page 2 </a>

16. 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.

17. Lab • 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