HTML MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

Size: px

Start display at page:

Download "HTML MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University"

Peter Ball
5 years ago
Views:

1 HTML MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University

2 2 HTML Quiz Date: 9/13/18 in two weeks from now HTML, CSS 14 steps, 25 points 1 hour 20 minutes Use class workstations You can use Google Preparations: Lynda HTML Essential Training, with James Williamson (Sections 1 7)

3 Learning Objectives 1. Describe the components of a URL. 2. Describe HTTP requests and responses. 3. Describe how HTML, CSS, and JavaScript all work together in a web application. 4. Distinguish between the way a web server processes static web pages and dynamic web pages. 5. Distinguish between the HTML5 semantic elements and the HTML div and span elements. 6. Describe the use of these HTML attributes: id, class, title, for, and name.

4 The components of an HTTP URL used by the Internet protocol domain name path filename What happens if you omit parts of a URL If you omit the protocol, will be used. If you omit the filename, the default document name for the web server will be used. The default document name is typically index.html, default.htm, or some variation. URL is short for Uniform Resource Locator C1, Slide 4

Click on a link in the current web page to load the URL.

5 Three ways to call an HTML page on the Internet Type the URL of a web page into the browser s address bar. Click on a link in the current web page to load the URL. Click a submit button on a form that references the URL C1, Slide 5

6 Request and response The URL you asked for The response you got back. 6

7 The architecture of a web application Client The Internet Web Server Database Server Client Server

8 Request and response HTTP request HTTP response HTML file Web Browser Web Server

A simple HTTP request GET / HTTP/1.1 Host: www.example.

1 200 OK Content-Type: text/html Content-Length: 136

2.3 <html> <head> <title>example Web Page</title>

9 A simple HTTP request GET / HTTP/1.1 Host: A simple HTTP response HTTP/ OK Content-Type: text/html Content-Length: 136 Server: Apache/2.2.3 <html> <head> <title>example Web Page</title> </head> <body> <p>this is a sample web page</p> </body> </html> Your Computer Sends This Out The Web Server Sends this back

10 These pages can also be dynamic! Someone, give me an example of a dynamic website

11 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!) HTML In the HTTP response you are likely to find all three of these languages in a single text file. JavaScript CSS HTML and CSS are special purpose languages, while JavaScript is a general purpose programming language. Each language is interpreted by the browser and each language has a job to do. C1, Slide 11

Why three languages? Each language is interpreted by the browser and each language has a job to do. HTML HTML provides us with the structure of a document.

12 Why three languages? Each language is interpreted by the browser and each language has a job to do. HTML HTML provides us with the structure of a document. HTML structure should convey some meaning, like the outline to term paper. Fun fact: HTML is short for: HyperText Markup Language CSS CSS is used to control the visual appearance (or style) of the HTML document CSS is analogous to how your term paper looks. (Choice of font, margins, etc.) Fun fact: CSS is short for Cascading Style Sheet JavaScript JavaScript is is used to manipulate the HTML document in response to one or more events. C1, Slide 12

13 Our focus for today JavaScript HTML CSS HTML is our focus for today Slide 13

14 HTML Example <!DOCTYPE html> <html> <head> <title>dealing with Data</title> </head> <body> <h1>html example</h1> <p>my first HTML paragraph.</p> </body> </html>

15 HTML Example Explained The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes a paragraph

16 HTML Elements HTML elements are written with a start tag, with an end tag, with the content in between: <tagname>content</tagname> The HTML element is everything from the start tag to the end tag: <p>my first HTML paragraph.</p>

17 Nested HTML Elements HTML elements can be nested (elements can contain elements). Example: <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first HTML paragraph.</p> </body> </html>

18 HTML Tree Structure

19 The primary HTML5 semantic elements header section article aside nav figure footer You can read more at: C1, Slide 19

20 How does that last example look in HTML? <body> <div id="container"> <header> <header> </header> <nav> <nav> </nav> <section> <section> <article> <article> about robots. </article> <article> <article> about space ships. </article> <article> <article> about aliens. </article> <article> This <article> holds a <figure>. <figure> <img src = " style='max-width:80%'> </figure> </article> </section> <aside> <aside> </aside> <footer> <footer> </footer> <div> </body> Slide 20

21 Another page that s structured with HTML5 elements <body> <header> <h1>san Joaquin Valley Town Hall</h1> </header> <main> <p>welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season! </p> </main> <footer> <p> San Joaquin Valley Town Hall.</p> </footer> </body> C1, Slide 21

22 The HTML in a web browser C1, Slide 22

23 The div and span elements Element div span Description A block element that provides a container for other elements. An inline element that lets you identify text that can be formatted with CSS. C1, Slide 23

24 Consider this HTML <article> The planet Mars, I scarcely need remind the reader, revolves about the sun at a mean distance of <div id="fancytext">140,000,000</div> miles, and the light and heat it receives from the sun is barely half of that received by this world. It must be, if the nebular hypothesis has any truth, older than our world; and long before this earth ceased to be molten, life upon its surface must have begun its course. The fact that it is scarcely one seventh of the volume of the earth must have accelerated its cooling to the temperature at which life could begin. It has air and water and all that is necessary for the support of animated existence. </article> Slide 24

25 It has this effect: That s not quite what we wanted! We used a <div> tag instead of a <span> tag. The <div> tag is used to contain other elements. It allows used to group other tags into blocks. So, when we used it, we got a line break after 140,000,000. That s because the block ended. Slide 25

26 Now consider this HTML <article> The planet Mars, I scarcely need remind the reader, revolves about the sun at a mean distance of <span id="fancytext">140,000,000</span> miles, and the light and heat it receives from the sun is barely half of that received by this world. It must be, if the nebular hypothesis has any truth, older than our world; and long before this earth ceased to be molten, life upon its surface must have begun its course. The fact that it is scarcely one seventh of the volume of the earth must have accelerated its cooling to the temperature at which life could begin. It has air and water and all that is necessary for the support of animated existence. </article> Slide 26

27 It has this effect: Ah! That s better. The span tag is only used to apply some formatting to the text inside the span. Which, in this case, is what we wanted. Slide 27

28 The basic HTML attributes id class name for title Attributes give us a way to attach extra significance or meaning to a tag. The attributes go inside the less than / greater than symbols that make up the tag. So if we have <tagname> then the attribute id would appear as follows: <tagname id="the_tag_id"> C1, Slide 28

29 HTML that uses these attributes <body> <h1>san Joaquin Valley Town Hall</h1> <h2 class="first_h2">welcome to San Joaquin Valley Town Hall.</h2> <p>please enter your address to subscribe to our newsletter.</p> <form id=" _form" name=" _form" action="join.html" method="get"> <label for=" "> </label> <input type="text" id=" " name=" " title="enter address here."> <input type="button" value="subscribe"> </form> </body> C1, Slide 29

30 The HTML in a web browser with a tooltip displayed for the text box C1, Slide 30

It may be the last version as well, because it is a living standard (that is, it is designed to constantly evolve and change.

31 A word about HTML 5 HTML 5 is a markup language used for structuring and presenting content on the World Wide Web. It is the version of HTML that we will use in this course. HTML 5 is the current major version of the HTML standard. It may be the last version as well, because it is a living standard (that is, it is designed to constantly evolve and change.) It was published in October 2014 by the World Wide Web Consortium (W3C). It is important to remember that it is a standard, and different browsers implement the standard with some variation. Slide 31

32 The HTML5 ratings of current browsers Perfect score is 555 Browser Release HTML5 Test Rating Google Chrome Opera Mozilla Firefox Apple Safari Internet Explorer Microsoft Edge The website for these ratings C1, Slide 32

33 Let s get some exercise... Slide 33

HTML and CSS MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

HTML and CSS MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University HTML and CSS MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University 2 HTML Quiz Date: 9/13/18 next Thursday HTML, CSS 14 steps, 25 points 1 hour 20 minutes Use class workstations