HTML Basics BCIS 3680 Enterprise Programming
advertisement
HTML Basics BCIS 3680 Enterprise Programming Web Client/Server Architecture Your browser (the client) requests a Web page from a remote computer (Web server). The Web server locates the requested page and, if the requested page is a dynamic page, executes programming code. The Web server sends the resulting page to the client that requested it. Each resource (a web page, a JPG file, a downloadable EXE file, etc.) on the Web server is uniquely identified by its Uniform Resource Locator (URL). 2 What’s In a URL 3 Web Root If you just enter the domain name, e.g., www.cob.unt.edu, the Web server assumes that you want to access the Web root directory. Since only domain name is entered, there won’t be a directory for sure. In this case, you will get the default page in the root directory. They usually go by the name default.htm, default.html, index.htm, index.html, etc., as defined by the admin. http://www.cob.unt.edu, and http://www.cob.unt.edu/index.php will all bring up the same index.php file in the root directory. 4 CoB Default Page: No File Name in URL 5 CoB Default Page: File Name in URL 6 Default Page in a Subdirectory If you don’t specify any file name, the Web server assumes that you want to access the “default page” in that directory. http://www.cob.unt.edu/itds and http://www.cob.unt.edu/itds/index.php both will bring up the page called index.php in the itds directory. Note this file is different from the index.php in the CoB root directory. In the Tomcat jargon, a default page is a “welcome file”. 7 ITDS Default Page 8 Static Web Pages A Web page author composes an HTML page, and saves it as an .htm or .html file. A user types a page request via URL into the browser, and the request is sent from the browser to the Web server. The Web server receives the page request and locates the .htm/html page in local file system. The Web server sends the HTML stream back across the Internet to the client browser. The browser interprets the HTML and displays the page. 9 HTML HTML is not case sensitive. Two main components of an HTML page Head Body HTML defines how text should be displayed on Web pages by using tags. The text enclosed between an opening tag and its matching closing tag is controlled by the tag. 10 Writing HTML with Notepad Add “html” or “htm” file extension 11 Change type to “All Files” HTML Elements An element (“tag”) consists of an opening tag (e.g., <h1>) and a closing tag (e.g., </h1>). Both contain a tag name between angled brackets. The only difference is the forward slash in the closing tag. An element defines either the structural role or formatting instruction for the portion of the text between the opening and closing tags, e.g., 12 <h1> for level-1 heading <b> for boldface HTML Elements 13 Tag Use <head> Header section of HTML <title> Text to display as title of page, used as child of <head> <table> Defines a table, parent of <th>, <tr>, and <td> <tr> Table row <th> Column headings (bold, centered), used as child of <tr> <td> Table data (cell), used as child element of <tr> <ul> Unordered list <li> List item (bullet), used as child of <ul> <p> Paragraph <h#> Headings (# being a number between 1 and 7) <hr> Horizontal bar <br> Line break Well-Formed Documents Some elements do not enclose any text. They usually are structural elements, e.g., <br> for break, <hr> for horizontal bar. Only the opening tag is really needed for these elements. However, there is a trend toward “well-formed” markup documents. To be compliant, it’s a recommended practice to add a matching closing tag any ways. A shorthand is to insert a space and a forward slash after the tag name in the opening tag, e.g., <br />. This is considered a well-formed element, even though there is only one tag. 14 HTML Element Example Each attribute is a name=value pair. Quotation marks in the attribute are optional but often included. An element can have multiple attributes, e.g., <a href="http://java.sun.com" target="_blank"> Closing tag is the same as opening tag, with a “/” added to the front. Not every element has attributes, e.g., the <i> element doesn’t. 15 Table HTML Note how the use of non-breaking space (&nbsp;) adds borders to an empty cell. 16 Dynamic Web Pages In a dynamic page, certain contents do not exist before the page is requested. The dynamic contents are generated upon request and often related to input provided by the user. For example: 17 The current time on the Web server. Page contents that show the current user’s username, first name, etc. Creating Dynamic Web Pages with JSP JSP is a way to generate dynamic contents in Web pages. It is a server-side scripting language. You can mix regular HTML tags with JSP script in the same JSP page. The JSP scripts, if any, are interpreted on the Web server (in fact, the application server does this). The content generated by the execution of JSP code is integrated with HTML code and the resulting page is sent to the client browser. 18 HTML Formatting Instructs the browser on how to format and display HTML tags (elements). HTML defines the structure of a document, e.g., <H1> to <H7> for headings of different levels; <p> for paragraph. Although you may add attributes to these tags to define their formatting, there are shortcomings to this method: 19 The coding is fixed to the tag. Style defined in an <p> tag is good only for that particular instance of <p>. Any other <p> tags on the SAME document will not take on the same look. If you want to update the looks of your page, you have to search the page, and find and fix every single instance of the tag you want to update. Don’t even think about reusability on other pages. Cascading Style Sheets The trend is to move toward the CSS. If you define styles for the current sheet, you only need to define a style for a particular tag once. All instances of that tag within the page gets the same look. If you define styles as a separate CSS document, you can link any number of pages to that document. All instances of a particular tag in all pages will look the same. This facilitates uniform looks across all pages on a site. Updating only needs to be done at one spot. A top-level style is inherited downwards unless overridden, e.g., <table> background will be inherited by <tr> and <td>. This is what “cascading” in the name means. 20 Defining a Style For styles defined within the page, use the <style> tag and put it in the <head> section. A style name starts with a period (well, it’s fact more complex than that, but this is good enough for this course), followed by the name of the style. A style can be composed by more than one aspect, e.g., font, font-size, font-style, background, foreground, etc. Each of these is defined in the form of attribute_name:attribut_value. Use semicolon to separate different name-value pairs. The semicolon after the last name-value pair is optional. 21 Using a Style To format an HTML tag using a defined style, add a namevalue pair as an attribute of the tag in the format of: style = style_name 22
