Web Design 1 Teach Yourself HTML CSS Marquette

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

Welcome! � Instructor: Karen � Lead Instructor for Mayes 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 � Class Instructor: Ms. Theresa schedule: 9 am to 1 pm.

My Dark Secret… �I am NOT a web designer!

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!

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

How big is the internet? �There 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!

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

How do computers find each other? �IP address = “Internet Protocol Address” Computer IP Local IP Server IP IP is linked to a “domain name” (words instead of numbers) Router External IP (WAN) Local IP

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 ◦ i. Page, web. com, Go. Daddy, Dream. Host, etc. �Web design “software” ◦ This can actually be done with a text editor (like notepad!) ◦ Free: Notepad++, Google Web Designer ◦ Commercial: Adobe Dreamweaver

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!

HTML Help for Beginners �http: //www. w 3 schools. com �http: //stackoverflow. com/ �https: //jsfiddle. net/ �And, when all else fails… �http: //www. google. com

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…” (Spoken in HTML)

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

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 a number or sending an email

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.

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

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?

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

Your brain vs. a computer �Whn yuo raed thsi, yuor brane caan ingore teh mstakes. �A computer can’t. �You must be very careful when giving computers directions!

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 Synta x is usuall y �Tip: if something is not Ca. Se Sen. S working as expected, iti. Ve! check your syntax ◦ <table> defines the start of a table ◦ <tabel> means nothing to your PC

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.

Website organization �A website is just a file folder root (kmmayes) inde x mystuf f art images me my my my cat sketc dog h documents a pdf birthday invitation a zipped folder of my art portfolio

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

Hyperlinks �You probably already know this, but… �A Hyperlink…

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

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

“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?

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

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

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

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

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

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!

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

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

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

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.

Select a language in Notepad++ �Select Languages, H, HTML

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

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!

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₂O would appear in your browser as H 2 O �See <su b> how the “sub” tag is stuck right in the middle of H 2 O?

There are LOTS of tags… Tag Use <i> italics �http: //www. w 3 schools. com/tags/ �Some <a> important ones: defines a hyperlink <img> places an image inserts a line break <p> starts a new paragraph <table> (you probably can guess) <div> and <span> define a section in a document <ul> defines a list of bullet points <ol> defines a numbered list <li> defines something as a list item

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

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 • H 2 O

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 H 2 O using the <sub> tag?

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

Voila! Your first (very boring) web page!

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”>

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>

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) Attribute (A hyperlink address is coming up) Value (Go to THIS hyperlink) Close. Tag (End the hyperlink now. )

Adding an image �Put the image in your “image” folder Reference would be images/Starbucks. png root (kmmayes) Starbucks. png images documents

Adding an image

Whoa!! �That’s a mighty big cup of coffee! �Tags can have more than one attribute. �Let’s change the size of that image! � <img src=“images/Starbucks. png” width=“ 200 px”/> Mmmmm…. Coffee…

<part one of class/> Tee-hee! �Take a break! r> <b <div> <div/>

Now… time to make it pretty! �HTML used to have tags formatting �<center> and <font>, for example �The problem… ◦ I have a website with 700 pages! Awesome! ◦ On each of those pages, the headings are blue! Awesome! ◦ Something changes and now I want red headings! … not so awesome.

Cascading Style Sheets – CSS �CSS allows you to apply styles to a certain part of all the web pages on a website. �I can make all of my blue headings red by changing a single word

ID and Class �You can add labels to parts of your web page. �This becomes important when you add formatting �You want to be able to easily identify elements on your page. �Use the ID and Class attributes to do this.

Example Class �Let me officially divide my “likes” list as a section. �You won’t SEE anything different… yet. <ul class=“likes”> <li><a href="http: //www. starbucks. com">Coffee</a></li> <li>Cats</li> <li>Science</li> <li>H₂O</li> </ul> “likes”

Use <div> �If you want to apply a class to a bunch of different elements (link, paragraph, list) at the same time, use <div> <div class="likes" > <ul> <li><a href="http: //www. starbucks. com">Coffee</a></li> <li>Cats</li> <li>Science</li> <li>H₂O</li> </ul> </div>

Make room for <style> �<style> is an HTML tag. �It lets the browser know that you’re about to give it CSS information. �Once you’re inside the <style> tag, you have a whole new syntax to follow!

CSS Syntax �In general… tag. class { attribute 1: value 1; attribute 2: value 2; }

Example of CSS Syntax �Make the “likes” list blue and bold. likes{ color= blue; font-weight=bold; }

Change your style! �I can use the <style> tag anywhere. ◦ Right in-line with the element �Easy to add to a single element ◦ In the header �Easily make changes to a whole page ◦ In another page �Easily make changes to a whole site

In-line CSS �Use <style> as an attribute instead of a tag. <ul class="likes" style="color: blue; font-weight: bold; " > <li><a href="http: //www. starbucks. com">Coffee</a></li> <li>Cats</li> <li>Science</li> <li>H₂O</li> </ul>

CSS in the head section Add to the head – applies to the whole page <head> <style>. likes{ color: blue; font-weight: bold; } </style> </head> � <ul class="likes" > <li><a href="http: //www. starbucks. com">Coffee</a></li> <li>Cats</li> <li>Science</li> <li>H₂O</li> </ul>

CSS as its own page �Contains all CSS styles for a whole website on one page �Create a new document �Change language to CSS �Add style info in the same format as used in last example. likes{ color: blue; font-weight: bold; } �Save to root directory

Connect to the style sheet �Add a reference to this style sheet in the web page’s head using the <link> tag <head> <link rel="stylesheet" type="text/css" href="main. Style. css"> </head>

Starting from scratch is A LOT of work �There are countless free web templates online. �Google! �Browse! �Download! �Reverse Engineer! (Take it apart and see how it works!)

Using a Template �We are going to be using the free template located here: �http: //all-free-download. com/freewebsitetemplates/anodized_2538. html �For your convenience, it is already downloaded and unzipped on your portable thumb drive.

What a difference CSS makes! �Double-click on the “index” file located in the TEMPLATE folder. It should open in a web browser. �Now, right-click on the “index” file and select “Edit with Notepad++”

Disable the Webpage’s CSS �Locate line 22. This should look familiar! �Highlight the line, right-click, and select “Block Comment” �Hit “Save”

Web Templates Without CSS �Refresh the “index” page in your browser �With CSS �Without CSS

Web tools: Inspector

Hovering over an element shows you its type and class

Experiment! �Use the Inspector to find a part of your page that you might want to change. �Open the “style. css” file by rightclicking and “Edit with Notepad++”

Inspect, Change, Save, Refresh �To customize your template: ◦ Inspect the web page with the Inspector tool and locate the area you want to change ◦ Locate the desired div, class, or ID in the CSS document and change it. ◦ Save the CSS style sheet ◦ Refresh your web page to observe the results �Try it!

When choosing a template… �It’s easiest to choose a template that is mostly reliant on CSS. �Check your template by locating the <link rel="stylesheet" type="text/css" href="main. Style. css"> (or equivalent) line of text in the index. htm file and disabling it. �If your template looks bare and boring without the CSS sheet, then it’s a good one!

Planning �Decide roughly what your website will look like. �How many pages? �Copy your template and rename it for every page in your website root (kmmayes) inde x mystuf f art images me my cat

Web Hosting �Unless you’re really, really motivated, it’s probably easiest to rent server space from a hosting company �Prices will vary by amount of data, support offered, and extra features �A subscription

Register a domain name �Easiest to do this right through your hosting company �Usually costs about $10 on its own �It will take up to 48 hours for your website to show up at its domain name �The internet learns to associate your domain name with the IP address of your web server.

Upload to your web server �FTP: File Transfer Protocol �Filezilla is a free tool and very user-friendly �Your web host company will supply you with an FTP account �You will create a username and password for your account

Transfer files �It’s as simple as dragging and dropping the contents of your root folder to your web directory!

Good Books! Any of the “For Dummies” Duckett books By: Jon

Download this slide show! http: //www. karenmmayes. com/ documents/Web. Design 1. zip