HTML Css Real
Transcript of HTML Css Real
-
7/27/2019 HTML Css Real
1/87
HTML/CSS
MUS 125
Matthew Williams
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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 ?
-
7/27/2019 HTML Css Real
9/87
Naming your document
It will look like this: (from now on, is assumed)
Awesome Page
-
7/27/2019 HTML Css Real
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?
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
14/87
Lets try this out!
Using jsfiddle and the heading tags, write your
six favorite composers, in order of importance
-
7/27/2019 HTML Css Real
15/87
My List
My Six Fave Composers
Richard Wagner
Claudio Monteverdi
Karlheinz Stockhausen
Anton Webern
J.S. Bach Hall and Oates
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
18/87
Hyperlinks and Attributes
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/ -
7/27/2019 HTML Css Real
19/87
Hyperlinks and Attributes
Lets do another one:
Create a hyperlink that takes us to Google.
Have the link say, Googs THIS!
Try it out in jsfiddle
-
7/27/2019 HTML Css Real
20/87
Hyperlinks and Attributes
This is how we do it
Googs
THIS!
-
7/27/2019 HTML Css Real
21/87
Hyperlinks and Attributes
Whoa my bad!
Lets try that again:
Googs
THIS!
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
23/87
Describing a link--Example
Googs THIS!
Try it out for yourself on jsfiddle
-
7/27/2019 HTML Css Real
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 [])
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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.
-
7/27/2019 HTML Css Real
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:
-
7/27/2019 HTML Css Real
28/87
Images
These are in PIXELS (which is abbreviated by px)
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
30/87
Lists
Remember:
stands for paragraph.
Surround it around your text so you can make
distinct paragraphs.
Lets practice!
-
7/27/2019 HTML Css Real
31/87
Lists
Make this into a series of distinct paragraphs.
This wont be seen
Text goes here!
SEE NEXT SLIDE FOR THE TEXT -
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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:
-
7/27/2019 HTML Css Real
35/87
List
Ferrari
Bsendorfer Grand
Trip to Indonesia
Notice how there are bullet points, and the list
is in no particular order
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
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:
-
7/27/2019 HTML Css Real
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)
-
7/27/2019 HTML Css Real
39/87
Changing Text
This changes my color
Notice how thetag 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
-
7/27/2019 HTML Css Real
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:
-
7/27/2019 HTML Css Real
41/87
Changing Text
Make me 20 pixels
big!
Make me 30 pixelsbig!
-
7/27/2019 HTML Css Real
42/87
Alignment
By default, everything is left-aligned. Lets
change that:
Text goes here, and
maybe you need a break
so its not onecontinuous horizontal line
You can use text-align:left or text-align:right or
text-align:center
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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?
-
7/27/2019 HTML Css Real
45/87
Strong and Emphasized
Same idea!
Hi, how are you?
-
7/27/2019 HTML Css Real
46/87
Table Service
Use tag to create a table of rows andcolumns
Use the tag to create table rows
Try it out!
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
48/87
Table Service
Try adding 3 or 4 columns using table data.
One
Two
Three
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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:
-
7/27/2019 HTML Css Real
53/87
Colspan
This takes up 3 columns
Name Birth Year
Matt Williams
1983
-
7/27/2019 HTML Css Real
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)
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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.
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
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!
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
64/87
CSS
Lets try this one out:
Don't forget to throw in the kitchen sink.
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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)
-
7/27/2019 HTML Css Real
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.
-
7/27/2019 HTML Css Real
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.
-
7/27/2019 HTML Css Real
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.
-
7/27/2019 HTML Css Real
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:
-
7/27/2019 HTML Css Real
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?
-
7/27/2019 HTML Css Real
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?
-
7/27/2019 HTML Css Real
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.
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
75/87
CSS
.blue{color: blue; font-family:monospace;}
This is a sentence.
This is a sentence withclass.
-
7/27/2019 HTML Css Real
76/87
CSS
Heres another:
.blue{color: blue; font-family:monospace;}
.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
-
7/27/2019 HTML Css Real
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.*/
.blue{color: blue; font-family:monospace;}
.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
-
7/27/2019 HTML Css Real
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.*/
.blue{color: blue; font-family:monospace;}
.tux{color:white; background:black;}
.razzledazzle{color:teal; background:orange; font-family:cursive}
.highlight{background:yellow; margin-top:15px; margin-bottom:15px}
This is a sentence.
This is a sentence with class.
This is a sentence with tuxedo colors.
This is just crazy
Let's make sure that this can be easily read.
Hey, me too!
-
7/27/2019 HTML Css Real
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:
-
7/27/2019 HTML Css Real
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;}
.blue{color: blue; font-family:monospace;}
.tux{color:white; background:black;}
.razzledazzle{color:teal; background:orange; font-family:cursive} .highlight{background:yellow; margin-top:15px; margin-bottom:15px}
This is a sentence.
This is a sentence with class.
This is a sentence with tuxedo colors.
This is just crazy
Let's make sure that this can be easily read.
Hey, me too!
CSS
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
82/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;}
.blue{color: blue; font-family:monospace;}
.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;}
This is a sentence.
This is a sentence with class.
This is a sentence with tuxedo colors.
This is just crazy
Let's make sure that this can be easily read.
Hey, me too!
CSS
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
84/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;
display:inline}
.blue{color: blue; font-family:monospace;}
.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 a sentence with class.
This is a sentence with tuxedo colors.
This is just crazy
Let's make sure that this can be easily read.
Hey, me too!
CSS
-
7/27/2019 HTML Css Real
85/87
CSS
From here we can mess with padding andmargins in order to get it a bit more clear.
CSS
-
7/27/2019 HTML Css Real
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
-
7/27/2019 HTML Css Real
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.