Learn HTML & CSS - Teach yourself web design in easy steps!

1. Web Design 1: Teach Yourself HTML & CSS Marquette OPUS College of Engineering

2. Welcome! • Instructor: Karen Mayes • Lead Instructor for Marquette’s Engineering Outreach programs. • Bachelor’s Degree in Molecular Biology, minors in Chemistry and Physics; Master’s of Science in Curriculum and Instruction • Careers in Chemistry, Teaching, and Environmental Science • Mentor for a community-based FIRST Robotics Team 1714 in South Milwaukee • Mom to 11-year old twins. • Assistant Instructor: Ms. Theresa • Class schedule: 9 am to 1 pm.

3. My Dark Secret… • I am NOT a web designer!

4. Another Secret… • You don’t have to be a web designer to design web pages! • The best tool for learning about publishing on the internet is… • The internet!

5. Internet 101 • How does the internet work? Web Provider A Web Server Other Web Servers and Other PCs Your PC/Phone/Tablet

6. How big is the internet? • There are about 7 billion people in the world • In 2000, about 360 million people used the internet. • In 2014, that number had increased to about 3.60 BILLION people!http://www.internetworldstats.com/stats.htm • About half the planet accesses the internet!

7. How do computers find each other? • Just like the postal service – addresses! House Apartment Apartment Apartment Post Office Apartment Mailbox

8. How do computers find each other? • IP address = “Internet Protocol Address” Computer IP Local IP Local IP Server IP IP is linked to a “domain name” (words instead of numbers) RouterExternal IP (WAN) Local IP (LAN) Local IP

9. What do you need to build your own web page? • A computer (duh.) • A web server • Most people rent space on someone else’s server • iPage, web.com, GoDaddy, DreamHost, etc. • Web design “software” • This can actually be done with a text editor (like notepad!) • Free: Notepad++, Google Web Designer • Commercial: Adobe Dreamweaver

10. Teaching Yourself • Learn by example! • Look at something that someone else did correctly, then • Copy it, customizing it for your own use • The hardest part…HAVE PATIENCE • Few things work right the first time!

11. HTML Help for Beginners • http://www.w3schools.com • http://stackoverflow.com/ • https://jsfiddle.net/ • And, when all else fails… • http://www.google.com

12. HTML • HTML stands for “Hypertext Markup Language.” • HTML is the language that web servers use to tell your browser what appears on your screen “Blah, blah, blah…” (Spoken in HTML)

13. HTML is a one-way language • Servers speak HTML • Web browsers understand HTML but don’t speak back “Blah, blah, blah…” (Spoken in HTML)

14. HTML is a formatting language • HTML can • Tell your browser what to display. • Direct your browser to another web page. • HTML cannot • Command the server to do anything (except pass information) • Interact with your computer (except through the browser) • Execute instructions like calculating anumber or sending an email

15. HTML “Sentences” • Every HTML instruction uses the same format • Each message starts with <>Ex: <blah> • Each message ends with </>Ex: <blah/> • An HTML instruction is called a “tag.” • Tags are used to display things on your screen or direct your browser somewhere else.

16. Example • “b” is a tag that tells the browser to make something bold • <b>This is bold.</b>would appear in your browser asThis is bold.

17. HTML… no secrets! • Your browser needs HTML to display web page information • The HTML instructions are called “source code.” • HTML source code is not secure. • Anyone can access the HTML information behind a web page! • Don’t believe me?

18. View source code… • Open Firefox • Go to http://www.marquette.edu/ • Hit Control-u • See???

19. Your brain vs. a computer • Whnyuoraedthsi, yuorbranecaaningoretehmstakes. • A computer can’t. • You must be very careful when giving computers directions!

20. Syntax: Grammar for Computers • Every language that a computer speaks has it’s own grammar and spelling • This is called “Syntax” • Programs like Notepad++ are useful because they help auto-fill information • Tip: if something is not working as expected, check your syntax • <table> defines the start of a table • <tabel> means nothing to your PC Syntax is usually CaSeSenSitiVe!

21. Get Ready… • Open “My Documents” • Right-click, Create New, Folder • Name your folder as follows: • First initial, middle initial, last name • Ex: kmmayes • This will be your web page folder.

22. Website organization • A website is just a file folder root(kmmayes) index mystuff art images me my cat my sketch my dog documents a pdf birthday invitation a zipped folder of my art portfolio

23. Local and Remote files • We will build our websites on our local computer. (That’s the one sitting in front of you!) • We will then upload it to a remote server. (That’s the one in another place.) • As long as everything you need is in your local file folder, it will work remotely. =

24. Hyperlinks • You probably already know this, but… • A Hyperlink…

25. …takes you somewhere else! • For hyperlinks in your web page to work, you must reference everything to your root folder. • Example: • C:/users/me/mydocuments/kmmayes/index.htmwill only work on my local pc! • Instead, useindex.htm This describes a location on your computer, NOT on the server. This describes a location within your root folder

26. Parts of an HTML page • In general, there are two main parts to an html page • The head – holds mostly “invisible” information like page title and style information. • The body – holds the information you want displayed on your web page

27. “Teach yourself” moment! • Open a webpage in Firefox • Hit control-u • Look at the first few lines of code for several web pages. • Can you guess how the start of our first HTML document will look?

28. Let’s write some HTML! • Open Notepad++ • Notepad ++ is just a fancy text editor • It recognizes different scripting and software programming languages • It displays the code for those languages in an easy-to-read format • It provides you with choices

29. Your first HTML code • Our first HTML instruction tells everyone what type of document to expect. • It looks like this: <!DOCTYPE html> • Some comments also include other information, such as the HTML version number it uses. • <!DOCTYPE> is it’s own, special tag

30. Alert the browser to HTML use • You defined which version of HTML you were going to use with <!DOCTYPE>(or we left the version blank and let the browser decide) • Now you have to tell the browser that you’re about to speak to it in HTML. • How? Use a tag! <html> • That’s it! Now your browser knows it’s listening to HTML.

31. Close your tags • <html> tells the browser that you’re starting to speak HTML. • Just in case you forget, close your HTML tag and then insert everything else in between. • (Close the door!)

32. Example: • <html> <head> blah blah blah blah blah blah </head> <body> blah blah blah blah blah blah • blah blah blah </body> • </html> • <html> • </html> When you open your <html> tag, write the closing tag right away </html> Then, insert all your other information in between them.

33. Writing a comment • You can also add invisible “comments” • A comment is information that the programmer wants to see, but doesn’t appear on the web page • It usually gives the programmer a clue about what is written on the page. • HTML comments can be written inside a <!--write comment here--> tag • The web browser will not display the comment. • Try it!

34. The HTML “head” • The most basic information to include in the “head” is your page title. • The title is the text that appears in the browser’s tab for that page

35. <head> and <title> • Tell the browser that you’re starting the “head section” • <head> • Then, tell the browser you’re giving your page a title • <title> • Then type a title! • Don’t forget to close your tags.

36. Almost finished! • Close the head and title tags. • Does yours look like this? <!DOCTYPE html> <html> <head> <title> My Webpage </title> </head> </html>

37. Yeah, but… kind of a mess! • Looking at all that text will get very confusing very fast. • This is where Notepad++ comes in! • If you tell Notepad++ that you’re using HTML, it will make your code easier to read.

38. Select a language in Notepad++ • Select Languages, H, HTML

39. Other ways to stay organized • Browsers don’t care about spaces, tabs, or empty lines. Use them to break up code. • Tabs are especially useful. • Consolidate short tags onto one line. Before After

40. Save and Preview • Your browser can view any HTML documents, even those on your local PC. • This allows you to look at your web pages before you put them on the server • The term “go live” means to upload a page for the public to view. • Save your work to your “root” folder • Hint… you just created your root folder. • Once your page is saved, open it! • Run, Launch in Firefox

41. HTML tags • HTML tags can be put just about anywhere. • “sub” is a tag that tells the browser to make letters drop below the line • H₂Owould appear in your browser asH2O • See how the “sub” tag is stuck right in the middle of H2O? <sub>

42. There are LOTS of tags… • http://www.w3schools.com/tags/ • Some important ones:

43. A note about “Old HTML” • The latest version of HTML is v5 • Earlier versions supported tags that changed your page’s appearance (colors, margins, type size, etc.) • These tags are “deprecated” • They still work... • But they won’t work forever. • We won’t use HTML to make things pretty. We’ll use CSS. (You don’t know what that is yet.) • So… right now things will look plain! Ooh! Pretty! CSS zzzzz... HTML

44. Add a “body” to your document • Let’s make our (very boring) web page look something like this… • Welcome to my webpage! • I like… • Coffee • Cats • Science • H2O

45. How? • Start a <body> tag • Start a paragraph with <p> • Place Welcome to my webpage inside <b> tags. • End the paragraph • Write I like… • Start an unordered list (bullets!) with <ul> • Put every bullet point in <li> tags • Finish your list • Close the <body> tag • Can you add H2O using the <sub> tag?

46. Your “body” code… <body> <p><b>Welcome to my webpage!</b></p> I like <ul> <li>Coffee</li> <li>Cats</li> <li>Science</li> <li>H₂O</li> </ul> </body> Notice how I used tabs and spaces to break up the code in an organized way…

47. Voila! Your first (very boring) web page!

48. Tags can have “attributes” • The tag <a> defines a hyperlink. • <a> by itself is useless! • To define the place you’re linking to, you must add extra information to your tag. • The correct syntax to define an attribute is this: <tag attribute name=“value”>

49. Example: • Let’s link the word “Coffee” to the Starbucks website. • Right now, the line looks like this: • <li>Coffee</li> • We can squeeze another tag in between the <li> and </li> • <li><a>Coffee</a></li>

50. Adding the link • To tell the computer where it’s going, you need to use the “href” (hyperlink reference) attribute • <li><a href=“www.starbucks.com”>Coffee</a></li> Tag(It’s a hyperlink) CloseTag(End the hyperlink now.) Attribute(A hyperlink address is coming up) Value(Go to THIS hyperlink)