Download presentation
Presentation is loading. Please wait.
1
HTML and CSS MIS 2402 Jeremy Shafer Department of MIS
Fox School of Business Temple University
2
Learning Objectives
3
Recall from last time… The URL you asked for …
The response you got back.
4
What’s in the response? A successful response will return at least one text file. (Really, usually more than one… but let’s start here!) In the HTTP response you are likely to find all three of these languages in a single text file. HTML and CSS are special purpose languages, while JavaScript is a general purpose programming language. HTML CSS JavaScript Each language is interpreted by the browser and each language has a job to do.
5
Our focus for today … HTML CSS JavaScript CSS is our focus for today … and a little bit more HTML.
6
How to specify a CSS rule
The pattern: selector { property : value ; … } For example: header { background-color: red; font-weight: bold; font-style: italic; width: 100%; } The rules in the example above tell us that the HTML header tag will have a red background, and that any text inside the header will be styled as bold and italic. The header width will take up 100 percent of the available width in the current browser’s viewport.
7
What’s a selector? The pattern: selector { property : value ; … }
The selector here indicates the HTML elements in the document that should be altered by the CSS rule. There are three simple options here, and many other variations on those simple options. But, basically, the selector can be: The name of a tag A specific tag identified by an id A collection of tags identified by a class The pattern: selector { property : value ; … }
8
An example of different selectors
The CSS rules: p { font-weight: bold; font-size: 2em; } #unique_and_pretty { font-weight: default; background-color: pink; color: white; .pretty { font-style: italic; The HTML: <p> I feel pretty </p> <p id='unique_and_pretty’> Oh, so pretty </p> <p> I feel pretty and witty and bright! </p> <p class='pretty’> And I pity </p> <p class='pretty'> Any girl who isn't me tonight </p> <p> I feel charming </p> <p> Oh, so charming </p> <p> It's alarming how charming I feel! </p> <p> And so pretty </p> <p> That I hardly can believe I'm real </p> Notice that class selectors are prefixed with a “.” id selectors are prefixed with a “#” and tag selectors have no prefix.
9
Our example in a browser
The HTML: <p> I feel pretty </p> <p id='unique_and_pretty’> Oh, so pretty </p> <p> I feel pretty and witty and bright! </p> <p class='pretty’> And I pity </p> <p class='pretty'> Any girl who isn't me tonight </p> <p> I feel charming </p> <p> Oh, so charming </p> <p> It's alarming how charming I feel! </p> <p> And so pretty </p> <p> That I hardly can believe I'm real </p>
10
The tricky part… For the new learner the tricky part is, of course, learning what all the possible properties and values are. A good reference can be found here: In this course, we will use a very small subset of the CSS properties and will introduce new ones as needed. If you ever see a new-to-you CSS property that you don’t recognize you can either look it up or ask about it. Here are some of the properties that we have used already! color, background-color, font-weight, font-size, font-family, padding, margin, width
11
Where do the CSS style rules go?
CSS style rules can be specified in one of two places: Inside the current document (this is an internal style sheet) Outside the current document (this is an external style sheet!) Technically, there’s a third way to apply a CSS style. It is called an inline style. It is advisable to use inline styles sparingly. A good, free CSS tutorial can be found here:
12
Where do the CSS style rules go? (2)
Internal style sheet: <head> <style> h1 { color: blue; margin-left: 40px; } body { font-family: “Arial”; } </style> </head> External style sheet: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Look! We just introduced a new HTML tag. The <link> tag is used to reference an external resource. It had attributes rel, type, and href.
13
Before we start out CSS exercise, we need to know a little more about HTML
14
HTML Form Tag This is an HTML page with a form on it. There is a <form> tag and inside the form tag there are three input tags, and a button.
15
HTML Form Tag (Source Code)
<h1>Please join our list</h1> <form id=" _form" name=" _form" action="join.html" method="get"> <label for=" _address1"> Address:</label> <input type="text" id=" _address1" name=" _address1"> <span id=" _address1_error">*</span><br> <label for=" _address2">Re-enter Address:</label> <input type="text" id=" _address2" name=" _address2"> <span id=" _address2_error">*</span><br> <label for="first_name">First Name:</label> <input type="text" id="first_name" name="first_name"> <span id="first_name_error">*</span><br> <label> </label> <input type="button" id="join_list" value="Join our List"> </form>
16
Attributes of the form tag
The action attribute of the form tag tells the browser where to send the data collected by the form. Notice this: <form id=" _form" name=" _form" action="join.html" method="get"> The method attribute of the form tag tells the browser how to send the data. The data could be set using the get method or by using the post method.
17
Before we move on… We can use CSS to improve the appearance of our form. This is the *same* web page in a browser after CSS has been applied to it.
18
OK, let’s get some exercise...
Similar presentations
