DEMYSTIFYING THE WEB HTML, CSS, PHP & OTHER CRAZY STUFF

DEMYSTIFYING THE WEBHTML, CSS, PHP & OTHER CRAZY STUFF Presenter: Michelle Johnson

Coding: Why Bother? • Do I have to learn programming, too?Not in a deep way. (Unless you plan a career change.) • What’s the benefit?You’ll likely run into some basic coding using a CMS.Understand the potential for the technology.

Alphabet Soup: Languages of the Web • HTML – HyperText Markup Language • CSS – Cascading Style SheetUsed to format web pages: Fonts, sizes, color, positioning, etc. • Php – Hypertext PreProcessorScripting language that generates web pages on the fly. • jQuery – Code library. Makes it easy to create animated effects, slideshows, drop-down menus

Square One: What is a Web Site? A collection of files stored on a computer called a web server. • Text files • Graphical files (.jpg or .gif, for example) • Files that contain scripts that make programs run.

A Peek Under the Hood Example

How Does Your Blog Differ? • It doesn’t really. It’s a type of web site. • Blogging software automatically generates web pages. • Blogging software = CMS It’s a “rapid production tool.”

A Typical Web Page • Can be created using any word processor. • It’s usually written using code called HTML or “hypertext markup language.” • It’s saved with the file extension “.html” or “.htm.

Example • Open a browser and call up a web page • View Source • This coding contains instructions to the web browser on how to display the page.

How Web Sites Get Created • Coding typed in by hand. (Outmoded, but some purists do it!) • Graphical editorsDreamweaver, for one… • Content Management Systems(Proprietary, other, including Wordpress, Drupal)

Disclaimer Programs such as Dreamweaver are not used to produce large sites! We’re using it as a learning/editing tool. Large-scale web production requires a Content Management System: CMS

Make a Simple Web Page. • Click this icon to Open Dreamweaver.

A Word About HTML Tags HTML codes usually work in pairs. • Opening tag: <tag> • Closing tag: </tag> • Example: Then you add some text here. • Note: Some tags are formatted this way:

Let’s Create Our Page Start by telling the browser this is an HTML page. At the top of your file type in the opening tag. Then a couple of blank spaces and the closing tag: <html> </html>

Title It Next, let’s add a page title. Note: This is key. It’s the text that shows up when you bookmark a page! We’ll use a HEAD and TITLE tag: <html><head><title>My Homepage</title></head> </html>

Save, preview Your Page • Click File > Save As • Call your file index.html • Save to desktop. • Use the Preview menu to view.

Convention: Homepage • When you create a homepage the file should be saved with the filename index.html or index.htm. Why? • When you type in a web address your web browser automatically looks for a file on the web server named “index.html.” • If you are looking for a page other than the homepage you have to type in the exact address to call up the page. Example: www.bu.edu/computing/manuals.html

Add some text Now, let’s tell the browser that it should show us the body text next. Tag: Body <html><head><title>My Homepage<title></head> <body> Hello world. This is my text for my page. </body> </html>

Format Your Text You can format text in HTML making it bold, italic, changing the color, font, etc. <html><head><title>My Homepage</head></title> <body> Hello world. This is my text for my page. </body> </html>

Paragraph Breaks Try this:Add a couple of paragraphs to your page, save it and view it again.<html><head><title>My Homepage</head></title> <body> Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. </body> </html>

Paragraph Tag HTML does not recognize blank lines. You must format breaks with a tag: for paragraph, for a single line break. <html><head><title>My Homepage</head></title> <body> Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. </body> </html>

Bulleted Lists <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> Try this: change “ul” to “ol”

Links HTML is all about linking. You click a link to get to another page/site. Syntax for links: <a href=“http://www.boston.com”>Click this!</a> <a href=“page.html”>Click this!</a>

Practice Linking Create a link: <html><head><title>My Homepage</head></title> <body> Hello world. This is my text for my page. Hello world. This is my text for my page. To visit my favorite site, which is boston.com, you should :<a href=“http://www.boston.com”>click here.</a> </body> </html>

The Easy Way • Switch to Design View • Add and format text, create links, add a photo.

How Does This Work in Your Blog? • Know Basic HTML tags to get “under the hood” and fix stuff! • Beware of “cut and paste” from MS Word. Keep it clean!

Your Blog: Under the HTML Hood This tab opens HTML mode, allowing you to edit code.

Tip: Generate Code in DW, Use in Blog • Save time: Create custom code in an editor, then copy/paste into your blog.

Practice: Embedding • YouTube Video

CSS: Cascading Style Sheets Used to define layout, formatting of web pages. • Applies changes across the entire site. • Used in addition to HTML. Connection to Your Blog or Web Site?

What Does it Look Like?

WP & CSS You’re in Control: • You can change Fonts, colors, placement of elements, spacing, etc. Let’s: • Take a look at CSS • Take a look at Wordpress CSS

Practice & Homework • Homework: Go to w3schools.com and complete the basic (or advanced HTML or CSS) tutorials. • Write a blog post with the HTML tab selectedHand-code as much as you can: links, colors, etc.Add a photo, but upload it first! (Get the url to it from the Media Library)Explain to your reader what’s “under the hood.”Example: I learned the code to create this link.

DEMYSTIFYING THE WEB HTML, CSS, PHP & OTHER CRAZY STUFF