WDV 101 Intro to Website Development

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 <imgsrc=“ ” /> • 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 have server space and a 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)

FTPs and Filezilla • Folder Structure http://www.dmaccwebdev.org/: WDV101 • Last 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 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> <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> • Image Links – Nest an Image tag and Anchor tag <a href=“filename “> <imgsrc=“” /> </a>

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

WDV 101 Intro to Website Development