HTML Css Real

7/27/2019 HTML Css Real

1/87

HTML/CSS

MUS 125

Matthew Williams


2/87

HTML

What does HTML stand for?

HyperText Markup Language

HyperText means its text that supports hyperlinks

Markup means weve taken a document and marked it

up for readability in browsers

The browser reads the language so you dont

have to Check out Source Page in Firefox to view coding

www.nytimes.com


3/87

HTML Elements

Tags

denoted by brackets

The HTML tag is

When you start tags, you must remember to close thetab

Start Tag:

End Tag:

The start and end tags tell the browser where your tags begin and

end.

EVERY HTML FILE BEGINS AND ENDS WITH AN HTMLTAG!


4/87

HTML5

5 is the new standard, though not everywebsite has adopted this set of rules

In order to let the browser know that youre

using HTML5, you MUST begin the HTML filewith:

then follow with the usual tags

The specifics and differences of the HTML types(XHTML, HTML 3, HTML 4, etc) is beyond ourscope


5/87

The Head

HTML documents contain:

The Head

Information about the document that is NOT displayed

on the screen

The Body

Everything else that IS displayed as part of the web

page


6/87

Head and Body

The head and body are tags, just like HTML is.

So, wed have a head tag that looks like:

Remember we have to CLOSE THE TAG!

And a body tag that looks like:


7/87

Nesting

Think of HTML as one big chain of operations.

You have to make sure that if you start a tag,

you cant close any other tag until you close

the last tag you started. So


8/87

Naming your document

First things first, whats your document called?

Go to nytimes.com

See whats on the tab. What does it say?

Theyve done this by using a tag

(Remember, you always close a tag in the same way, by adding

a / before the name of the tag)

How do you think well insert a title tag so the

document name would be Awesome Page ?


9/87

Naming your document

It will look like this: (from now on, is assumed)

Awesome Page


10/87

Lets Practice!

Go to jsfiddle.net

Underneath the HTML portion, lets try out whatweve learned. Make sure that you UNCHECKNormalized CSS in order to see our text properly

Remember that weve already said items in the do NOT show up on the document. (tags DO show up on the tabs, though!)

You can see results if you type anything between the tags.

Notice how jsfiddle responds when you open andclose tags. Why does it do so?


11/87

The Body

Remember weve said that things in the

WILL be displayed

Here we can enter text that will be visible. How do

we separate text into paragraphs?

Easy, with the

tag!

MUST be in the tag


12/87

Lets practice!

Type this out in jsfiddle

This is not visible in the document

MUS 125 class is so much fun.

I know and the teacher is so funny!


13/87

Organizing our document

Headings

We can order our content using six heading tags.

Most important

Very important

Important

Less important

Why bother?

Ugh I cant believe I have to even type this


14/87

Lets try this out!

Using jsfiddle and the heading tags, write your

six favorite composers, in order of importance


15/87

My List

My Six Fave Composers

Richard Wagner

Claudio Monteverdi

Karlheinz Stockhausen

Anton Webern

J.S. Bach Hall and Oates


16/87

Hyperlinks

Links are text that redirect you to another page.You use these all the time while online!

The tag for hyperlinks is easy:

Remember, this is underneath our tag so thatwe can see it on the HTML document

For example:

www.google.com

But wait! Were not done just yet


17/87

Hyperlinks and Attributes

Attributes are extra info we give to tags

They are ALWAYS placed in the start tag

Always followed by an = sign, then an attribute

value placed in quotes ( ) We use the href attribute to tell the browser

where to take us once we click our hyperlink

Typically, we want the actual text that becomes

the link to be different from the text of thewebsite were going.

Confused? Dont be!


18/87


Check this out:

Click here to go to the

UIndy page!

You can have that link say anything you want,and it will always direct the user to the site

you entered.

Try this out in jsfiddle!
http://uindy.edu/http://uindy.edu/


19/87


Lets do another one:

Create a hyperlink that takes us to Google.

Have the link say, Googs THIS!

Try it out in jsfiddle


20/87


This is how we do it

Googs

THIS!


21/87


Whoa my bad!

Lets try that again:

Googs

THIS!


22/87

Describing a link

When you place your cursor over a link,

sometimes it gives a small description, right?

Lets do that!

We use the attribute for the tag

Lets see an example!


23/87

Describing a link--Example

Googs THIS!

Try it out for yourself on jsfiddle


24/87

Images

So how do we add images to our webpage?

By using the image tag!

Because we want it visible, it goes in the tag (just like paragraphs [

] and

links [])


25/87

Images

Keep in mind that with tags, we close

the tag differently. At the very end, after all

our attributes, we add a space, then />

(Dont worry, well see an example in just a

moment)

We need the attribute called the source

attribute: src, which locates the source of theimage


26/87

Images

Lets try one out:

Pretty cool, right? That piece is by Paul Signacfrom 1891 called Setting Sun. Its at theMOMA in New York.


27/87

Images

You can change the height and width of your

picture using HTML. The attributes we use for

this are:

height

width

Lets use our previous example:


28/87

Images

These are in PIXELS (which is abbreviated by px)


29/87

Click-able Images

Lets make our images become a hyperlink to the

stars! Or, at least to a website.

Lets surround an tag with tags!


30/87

Lists

Remember:

stands for paragraph.

Surround it around your text so you can make

distinct paragraphs.

Lets practice!


31/87

Lists

Make this into a series of distinct paragraphs.

This wont be seen

Text goes here!
SEE NEXT SLIDE FOR THE TEXT


32/87

Lists

Use these series of sentences to make separateparagraphs:

Having observed hexatonic cycles in the laboratory,we are now in a position to study them in the field.Figures 2.5 through 2.8 present four of the earliesthexatonic cycles, from four decades of Viennesemusic. It is characteristic of these chronologically earlyexamples that tonicizing dissonances buffer the

stations of the cycle, which are presented at a thinlyveiled layer of the middleground.

(p.25 of Richard CohnsAudacious Euphony


33/87

Lists

Unordered Lists: Order DOES NOT matter

Will look like bullet points in your browser

unordered lists tag:

You surround your entire list with this tag. We are

NESTING here!

Example:

list stuff


34/87

Lists

We have to tell the browser where each list

item starts and ends. Which means we use

The list item tag:

Lets have an example with your birthday wish

list:


35/87

List

Ferrari

Bsendorfer Grand

Trip to Indonesia

Notice how there are bullet points, and the list

is in no particular order


36/87

Ordered Lists

Uses the same structure as unordered lists.

Instead of starting with the unordered list tag

(), we now use the ordered list tag:

Try it!


37/87

Comments

We can add comments to our HTML that allow

us to write notes to ourselves

Remember, using the comment tags allows only

the person looking at the source code to viewthem, it will NOT be visible on the webpage.

Comments start with

For example:


38/87

Changing Text

You can change the style of your text using the

tags

This may seem tedious, but dont worry:

Cascading Style Sheets will take care of this

burden for us later on; its just important to

know how this works

Heres how you add a style attribute to your

tags: (next page)


39/87

Changing Text

This changes my color
Notice how the
tag is not closed until we are

finished inputting the style attributes

Colors in hexadecimal are numbers with six digits:first two are for red, next two for green, next twofor blue. So, RRGGBB

The higher the number, the brighter the pixel We count this way (from lowest to highest:

0123456789ABCDEF

What would #00FF00 mean? Green

What about #FF0000? Red


40/87

Changing Text

Using the same idea with the style attribute

but with text size:

You can change text size by:

Hey!

Remember that px is short for pixels

Lets try out an example:


41/87

Changing Text

Make me 20 pixels

big!

Make me 30 pixelsbig!


42/87

Alignment

By default, everything is left-aligned. Lets

change that:

Text goes here, and

maybe you need a break
so its not one

continuous horizontal line

You can use text-align:left or text-align:right or

text-align:center


43/87

Adding Emphasis

The tag means emphasis, or italic

Heres how you would use it:

Hi, how are you?

(You can place the tag anywhere, like: Hi, how are you?)

Its just wherever youd like something to have emphasis


44/87

Strong Tag

What about if wed like some text to be bold?

We add the strong tag:

Same idea as the emphasis tag:

Hi, how are you?


45/87

Strong and Emphasized

Same idea!

Hi, how are you?


46/87

Table Service

Use tag to create a table of rows andcolumns

Use the tag to create table rows

Try it out!


47/87

Table Service

Well, we didnt see anything. Thats okay! We will withthis new data:

We need to add table columns and table data ():

One


48/87

Table Service

Try adding 3 or 4 columns using table data.

One

Two

Three


49/87

More Table Service?? (you belonginMiami)

We just created a single column table. How do we addmore columns?

If we add two or more tags in a single tag, itessentially creates another column. Have a look:

Matt Williams

1983

We can add more s and s to create more rowsand columns


50/87

More Tables

We can use and to add more

information to our tables head and body.

contains info about the table

contains the actual tabular data

Very similar to and !

contains info about the webpage

actually contains the content


51/87

Putting it together

Notice where the tags are placed, and notice the use of (NOT ):

Name

Birth Year

Matt Williams

1983

Wh t if t d titl f


52/87

What if we wanted a title for our

table?

By default, and take up 1 column.

(Just check out what weve been doing. Name

and Birth Year are taking up one column)

We can extend this by using the attributecolspan, which can be used in both the and

elements.

Lets try it out on the next page:


53/87

Colspan

This takes up 3 columns

Name Birth Year

Matt Williams

1983


54/87

What are you fave symphonies?

Tell me in a table.

Use the handout to complete your table

Feel free to change any attributes you wish

(colors, padding, italics, bolds, lines, etc)


55/87

Cascading Style Sheets

HTML and CSS:

Total Besties 4everthey work really well

together!

HTML is all about the business, where CSS isconcerned only with style and appearance


56/87

CSS

Weve been secretly using CSS before, when

we add color to text.

Remember p style=color:red ? Thats a form

of CSS


57/87

CSS

Lets break down the text of CSS real quick:

First we have the paragraph tag:

Then we have the overall CSS declaration:

color:green

color is the property

green is the value

a colon separates the two


58/87

CSS and the Background

We can change the color of the background by

using the style attribute. Try it out!

this background is teal


59/87

CSS: Span Tags

tags let you add style to something

thats not already attached to some other

HTML tag. For example!

Check this out

because its prettyneat.


60/87

CSS: div tags

Inherently, tags and tags dont meananything. They are ways of adding CSS to your pagewhere we used to use HTML.

Span element is inline. That means you can have

multiple spans and they will show up on the same line. Div elements are block level. If you have multiple divs

they will show up as separate lines.

This is important to understand, because when we

want to decorate our page, we should use CSS and NOTHTML. This can be confusing, but with practice


61/87

HTML vs. CSS

Check out the difference hereOption 1, using HTML: Matts page

I have a great class, who loves

SCHENKERIAN ANALYSIS

and also the works of Marcel Proust, whose Wikipedia pageWikipedia, is prettyneat.

I am

in UIndys

CDFAC!


62/87

HTML vs. CSS

Option 2 using CSS Matts page

I have a great class, who loves

SCHENKERIAN ANALYSIS

and also the works of Marcel Proust, whose Wikipedia pageWikipedia, is prettyneat.

I am

in UIndys

CDFAC!


63/87

CSS

So far weve been separately changing things on

our screen:

or

We can combine these into one line using asemicolon:

And, we dont have to stop at just twodeclarations; we can put as many as wed like as

long as they are separated by the semicolon


64/87

CSS

Lets try this one out:

Don't forget to throw in the kitchen sink.


65/87

CSS

What all did we just add?

Color:blue

Font-family:monospace

Font-weight:bold

Font-size:25px

Font-style:italic

Letter-spacing:10px


66/87

CSS

So far, weve added style that occurs in-line,

meaning that it doesnt apply to the whole

page. How do we fix that?

We have to create an area for CSS to refer tofor all of our styles. We do that with the

tag. This area is called a style sheet.

(rememberCascading Style Sheets)


67/87

CSS

Heres an example, and remember that were going to placeour style sheet above the tag for now.

em {color:red;}

span {font-family:monospace;}

I'm excited to see some sweetCSS happening.


68/87

CSS

This let us do a few things: We were able to designate that whenever we

input an tag (emphasis/italics), that it alsowas the color red.

We were able to designate that whenever weinput a tag, that it will be in monospacefont.

Whats great about this is that all this willhappen EVERY time we input and. It affects the entire sheet/page.


69/87

CSS

Now we are going to try this out. Remember to put eachdeclaration on its own line for this one:

p {text-indent: 20px;}

p {border: solid 1px black;} p {padding: 30px;}

p {color:blue;}

p {background:yellow;}

This paragraph should be indented 20 pixels, it shouldbe blue with a yellow background, it should have a blackborder and it should have 30 pixels of padding.


70/87

CSS

So, what just happened? Essentially, for every

paragraph, (and the last example only used

one

), we will have all those style choices

reflected in our text. Lets do one more thatincludes a few more declarations:


71/87

CSS

p {letter-spacing: 5px;}

p {text-decoration: line-through;} (underline, overline)

p {text-transform: capitalize;} (uppercase, lowercase, none)

p {text-align: center;} (left, right, justify)

p {text-indent: 20%;}

p {line-height: 10px;}

CSS can be confusing sometimes, but with enough practice you will definitely get the hang of it.Like the kitten in the poster, I want to remind you to hang in there! Seriously, just think of the littlekitten that was made to hang on that tree. That wasnt very nice of the photographers to do. Whodo they think they are, anyway?


72/87

CSS

Selectors: With our {} weve been telling our webpage what

to do with certain tags and how they should bestyled. These declarations are called selectors:

Selector {property: value;}

The p {} selects all the

elements

The span {} selects all the elements

What if we wanted only *some* of the

elements to act in a certain way, or *some* ofthe elements to act in another way?


73/87

CSS

No problem! We have to tell the HTML

document that certain elements share

something in commona class

HTML has a class attribute that lets you createyour own class name to group elements

together. CSS has a way to target just the

elements that have a same class name.


74/87

CSS

The name of the class is the selector. It can be

any name you want, and you can create as

many classes as you want. The selector for a

class always start with a dot (.) followed by theclass name, with no spaces in between

Lets try an example using a class


75/87

CSS

.blue{color: blue; font-family:monospace;}

This is a sentence.

This is a sentence withclass.


76/87

CSS

Heres another:


.tux{color:white; background:black;}

.razzledazzle{color:teal; background:orange; font-family:cursive}

This is a sentence.

This is a sentence with class.

This is a sentence with tuxedo colors.

This is just crazy


77/87

CSS

/*Here's how you write comments in CSS. Notice how when you enter them in

JSFiddle we don't see anything in the end result.*/




This is a sentence.



This is just crazy


78/87

CSS

We can make special classes for specific lines:

/*Here's how you write comments in CSS. Notice how when you enter them in JSFiddle we don'tsee anything in the end result.*/




.highlight{background:yellow; margin-top:15px; margin-bottom:15px}

This is a sentence.



This is just crazy

Let's make sure that this can be easily read.

Hey, me too!


79/87

CSS

Now were going to mess with padding and

margins. But first, lets check out how our

paragraphs are organized. We can do this

easily by adding borders to our text, to seehow far our lines go.

Heres an example, using our text:


80/87

CSS

/*Here's how you write comments in CSS. Notice how when you enter them in JSFiddle we don't see anything in the end result.*/

p{border-style: dashed;

border-width: 1px;

border-color: orange;

margin: 0px;

padding-left: 10%;

padding-right: 10%;

text-align: justify;}



.razzledazzle{color:teal; background:orange; font-family:cursive} .highlight{background:yellow; margin-top:15px; margin-bottom:15px}

This is a sentence.



This is just crazy


Hey, me too!

CSS


81/87

CSS

Notice that our paragraphs have 10% padding,

and 15px margins.

Margins are OUTSIDE the border

Padding is INSIDE the border

Lets manipulate this using our example:

CSS


82/87

CSS



border-width: 1px;


margin: 0px;

padding-left: 10%;

padding-right: 10%;

text-align: justify;}



.razzledazzle{color:teal; background:orange; font-family:cursive} .highlight{background:yellow; margin-top:15px; margin-bottom:15px; margin-right: 10%; margin-left: 10%; padding:0;}

This is a sentence.



This is just crazy


Hey, me too!

CSS


83/87

CSS

Inline vs Block Remember that inline elements ( )

act like they are in a sentence. They come aftereach other horizontally.

Block elements (

) are displayed asblocks.

You can add this to the style sheet to manipulateinline and block elements: Display:inline

Lets see it in action:

CSS


84/87

CSS



border-width: 1px;


margin: 0px;

padding-left: 10%;

padding-right: 10%;

text-align: justify;

display:inline}


.tux{color:white; background:black;} .razzledazzle{color:teal; background:orange; font-family:cursive}

.highlight{background:yellow; margin-top:15px; margin-bottom:15px; margin-right: 10%; margin-left: 10%; padding:0;}

span{background:green}

This is a sentence.



This is just crazy


Hey, me too!

CSS


85/87

CSS

From here we can mess with padding andmargins in order to get it a bit more clear.

CSS


86/87

CSS

Collapsing Declarations Weve been doing a lot of individual declarations

Border-style:

Border-width:

Border-color: Fortunately, we can do all this at once:

Border: [style] [width] [color]

Padding: [top] [right] [bottom] [left]

If you want all to be the same: Margin: [all four] or margin: [vertical] [horizontal]

Its goes in the order, just like a clock

Well see examples of these later.

E t l St l Sh t


87/87

External Style Sheets

Weve been using the tag for a whilenow. Its time to say goodbye.

We are now going to use the CSS window in

JSFiddle.

Documents

HTML Css Real