HTML Bootcamp

MayeCreate Design HTML Bootcamp

What We’ll be Going Over: What is HTML? The Must-Haves of Editing HTML What Are Tags? Tags You Should Know Structure of a web page Letters Home – practicing what you know Common Mistakes Links

What We’ll be Going Over (continued): Using CSS to Style your HTML How to use Inline Styles Changing Colors Text Backgrounds Changing Typefaces Spans & Divs Adding Images Floating on the River

What is HTML? HTML = Hyper Text Markup Language It is not a programming language, it is a markup language that consists of a set up markup tags. These markup tags are used to describe web pages. W3schools.com/html/html_intro.asp

Must Haves Text Editing Program We use Adobe CS5 Dreamweaver TextWrangler for Mac or Komodo Edit for PC users are free Notepad also works Hosting Space This is the house where your files will live

Must Haves (continued) FTP Program This is the moving truck that gets your files from your old house (your computer) to your new house (your hosting space) Domain Name Your guests will take this road to visit your house (website)

What are tags? Tags surround plain text and describe web pages. They are keywords or letters surrounded by angle brackets like: <html> They normally come in pairs: <body> </body> The first tag is a start tag (aka an opening tag) & the second is an end tag (aka closing tag) W3schools.com/html/html_intro.asp

On the Lunch Menu: Hamburger http://www.dontfeartheinternet.com/html/html

Tags You Should Know a address blockquote body br div em h1 h2 h3 h4 h5 h6 head html img li link ol p span strong style strong title ul http://www.dontfeartheinternet.com/html/html

Web Page’s Basic Structure DOCTYPE – before the html tag, refers to version of markup html – describes the where the webpage starts and ends head – for specific information that is not visible on the page body – holds the visible page content http://w3schools.com/html/html_intro.asp

My Letter Home The tags I used and what they look like.

Write a Letter Home Login: Host: tranq3.tranquility.net User: html Password: bootcamp Download letterhome.html Open letterhome.html in a text editor (not Word!) OR Flip to the letter home in your workbook

Edit Your Letter Home Fill in the blanks/replace the all CAPS text Insert the following tags where you think they go: html head title body h1 h2 p strong ol ul li a em

Let’s Look at Your Letter Home Rename your file to be NAME_letterhome.html Upload it into your folder in the hosting space: Login: Host: tranq3.tranquility.net User: html Password: bootcamp Upload your file into your folder Look at your file in a web browser by going to:tranq3.tranquility.net/~html/NAME/NAME_letterhome.html

Fix Your Mistakes It is very common for the following mistakes to happen when using HTML: Mis-spellings (reference your tags list) Brackets are missing Tags don’t close </TAG> TAG = whatever tag you are trying to close Tags open and close, but don’t match

Practice Proofing Mistakes happen… using what you’ve learned so far, can you find the 7 mistakes in the proof_letterhome.html file? (see workbook) Hints: If it opens, it must close It must be spelled correctly All tags need to be held in < >

Links <a href=“destination/action”>What people click on</a> Composed of 3 parts: Anchor tag: <a> href attribute: href=“” (inside the starting anchor tag) Content that people click on (must be in between anchor starting and closing tags)

Different Types of Links To a website/webpage: <a href=“http://www.mayecreate.com/”>Our Website</a> To an email address: <a href=“mailto:info@mayecreate.com”>Email Us!</a> For a phone number: <a href=“tel:5734471836”>Call Us!</a>

Open Link In a New Window This is controlled through the target attribute within your linked anchor tag: <a href=“http://www.facebook.com/mayecreate” target=“_blank”>Find Us on Facebook</a> _blank = open in a new window or tab _self = open in same frame as it was clicked _parent = open in the parent frameset _top = open in the full body of the window Default (if left off) is to open in the same window/frame

Making It Look Good All web browsers have default styles for the standard html tags. We use CSS to style elements so they look cleaner and fit the style of the website/client This is accomplished through CSS

CSS – Stylesheet vs. Inline Styling 2 ways to style HTML: External stylesheet Linked inside head tag Allows the same styles to be applied to lots of different elements throughout a site Requires knowledge of CSS Inline styling Written within the tag it is being applied to Only applied in that instance Little easier than drafting a whole stylesheet

Bones are Good – Let’s Add Some Fun!

Starting the Style: Within the tag you are wanting to change, you must add the style attribute: <p style=“ ”>Text I want to change</p> This is where we will be telling it how to look

Changing the Color Changing Text Color: color:#FFCC99; Changing Background Color: background-color:#336633; #FFFFFF #CCCCCC #666666 #333333 #000000 Find Hexidecimal Codes: http://www.mayecreate.com/2010/09/color-codes/

Typeface Changes This can be done by defining your font family using: font-family: Trebuchet MS, Arial, Helvetica, sans-serif; Its important to list several typefaces, so if the device being used to view your page doesn’t have it, it depreciates to the next best thing. There are several fonts that are considered universal

Universal Fonts / Standard Font-Families Verdana,Geneva, sans-serif Georgia, Times New Roman, Times, serif Courier New, Courier, monospace Arial, Helvetica, sans-serif Tahoma,Geneva, sans-serif Trebuchet MS, Arial, Helvetica, sans-serif Palatino Linotype, Book Antiqua,Palatino, serif Lucida Sans Unicode, Lucida Grand, sans-serif

Smaller Changes strong = bold em = italics span = changes within another tag

Big Changes = Divs div = a “box” that can hold many different things, including other divs! Your webpage might look a little broken if things aren’t in the right order. If things are in the wrong order, or these tags don’t close, it may seem like your whole webpage is broken!

Before: the image is not displaying above the columns Example of a Broken HTML After: the image is free of any other tags and displays at the top of the page

Rules of Divs: They can be nested The end tag closes the open div immediately before it Example: <div> <div class=“column1”>Contents in column 1</div> <div class=“column2”> Contents of column 2 </div> </div>

Adding Images to Your Site <imgsrc=“url for image to be used” height=“# in pixels” width=“# in pixels” /> Composed of 4 parts: img tag src attribute = url for the image to be used height in pixels (optional) width in pixels (optional)

Images Image are great for adding interest If they are too big, they can increase loading time Keep loading time down by making images for web: 72 ppi (pixels per inch) = web resolution Less than 700 pixels tall or 700 pixels wide

Image File Types JPG = white background, best for gradients GIF = for web, not really useable by other programs, can have transparent background, or not PNG = best for transparent backgrounds

Floating on the River Floating objects can allow all kinds of fun things to happen on your website. It allows text to “wrap” around images 2 options: float:left; float:right;

Rules of the River Float left unless absolutely necessary. If you float left, the text or other content that needs to move up to the right of the floating object can go before or after it. If floating right, the content that you want to appear to the left of the floating object must come after it.

S’more Things to Remember Text colors need to have good contrast so your viewers can read it. Using more than two fonts gets confusing really quickly! Make changes thoughtfully

Campfire Horror Stories: Don’t Just Do It…

What We Went Over: What is HTML? The Must-Haves of Editing HTML What Are Tags? Tags You Should Know Structure of a web page Letters Home – practicing what you know Common Mistakes Links

What We Went Over (continued): Using CSS to Style your HTML How to use Inline Styles Changing Colors Text Backgrounds Changing Typefaces Spans & Divs Adding Images Floating on the River

Learn More @ Columbia Area Career Center Tonight I’m teaching: Designing Effective Publications 6-9pm I’ll also be teaching: InDesign CS5 – Level 2: Wed. Sept. 28, Oct. 5 & 12 | $129 InDesign CS5 – Level 1: Wed. Oct. 26, Nov. 2 & 9 | $154 InDesign CS5 – Level 2: Wed. Nov. 30, Dec. 7 & 14 | $129 If interested, sign up at career-center.org/adult

HTML Bootcamp

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a HTML Bootcamp

Semelhante a HTML Bootcamp (20)

Último

Último (20)

HTML Bootcamp