Background (1/6) • What is Computer Science?Computer science (CS) is the study of the theoretical foundations of information and computation and their implementation and application in computer systems.- there are so many sub-fields in CS,- but it does not involve the study of computer themselves.
Background (2/6) • Fields of CS (an incomplete list):- Mathematical foundations - Algorithms and Data Structures - Programming Languages and Compilers - Concurrent, Parallel and Distributed systems - Software Engineering - Computer Architecture and Operating Systems - Communications - Databases - Artificial Intelligence - Computer Graphics - Human-Computer Interaction
Background (3/6) • Communications – NetworkingA computer network is any set of computers or devices connected to each other. E.g. the Internet, or a small local area network (LAN) with two computers connected with standard networking cables. • The Internet: a "network of networks" that consists of millions of smaller domestic , academic, business and government networks, which together carry various information and services, such as Email, online chat, file transfer, and the interlinked web pages and other documents of the World Wide Web (WWW). • WWW:a system of interlinked, hypertext documents that runs over the Internet. With a Web browser, a user views Web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks.- created around 1990, by Tim Berners-Lee and Robert Cailliau - Web standards: URI, HTTP, HTML
HTML (1/10) • A brief review of HTMLAn HTML file is a simple text file containing small markup tags, with a file type extension as .htm or .html. We can create an HTML files using any common text editor, such as Windows Notepad.Exercise 1: The first HTML page • Create a simple text file using notepad. • Type in the contents as shown on the left. • Save and close the file, and then rename it to “MyPage.html”. • Double-click on the file to open it using Internet Explorer. <html> <head> <title>Title of page</title> </head> <body> The first HTML page. <b>This text is bold</b> </body> </html>
HTML (2/10) • Structure of the first HTML page1) <html> … </html>These two tags tell the browser where is the start and the end of an HTML document.2) <head> … </head> The text between these tags is the header info, which is not displayed.3) <title> … </title> The text between these tags is a title to be displayed in the browser’s caption.4) <body> … </body> The text between these tags will be displayed in the browser window. 5) <b> … </b>The text between these tags will be displayed in a bold font.1, 2, 3, and 4 constitutes the minimum structure of an HTML document!
HTML (3/10) • HTML ElementsThe “tags” we mentioned in the previous slide are formally called HTML Elements. There are several important issues we need to know about them: • HTML Elements are surrounded by angle brackets <>. • Tags normally come in pairs like <b> and </b>. • The text between the start and end tags is the element content. • HTML tags are not case sensitive, but according to the latest web standards, we should always use lowercase tags. • Tags can have attributes, which provide additional information to an HTML element. Attributes are always specified in the start tag of an HTML element, in the format: name=“value”, where values should always be enclosed in quotes (either double or single quotes).E.g. <table border="0"> … </table>
HTML (4/10) • Basic HTML tags:1) Headings E.g. <h1>This is a heading</h1>, <h1> to <h6> are allowed2) Paragraphs E.g. <p>This is a paragraph</p>3) Line Breaks E.g. <p>This <br> is a para<br>graph with line breaks</p>4) Comments E.g. <!-- This is a comment --> Exercise 2: Insert more tags into the first HTML page
HTML (5/10) • HTML Text FormattingStill remember the <b> … </b> tags? HTML uses the following tags to format a text:1) <big>, <small>, <em>, <i>, and <strong>2) <sub>, <sup>, <ins>, and <del>3) <code>, <kbd>, <samp>, <tt>, <var>, and <pre>4) <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <q>, <cite>, and <dfn>Exercise 3: Try out <i>, <ins>, <del>, <sub>, and <sup> tags.Exercise 4: Try out the <bdo> tag with the attribute dir: <bdo dir="rtl">Exercise 5: Try to explain how the <pre> tag works.
HTML (6/10) • HTML Character EntitiesRecall that the angel brackets have been used in HTML for special purpose, then how we can display < and > characters in a text? – Using Character Entities!A character entity has three parts: ampersand + entity name + semicolon, (i.e. &+…+;), e.g. < > & " Exercise 6: Try out the following character entities: ¢ £ ¥ § © ® × ÷[Tip: character entities can be also presented by &+#+entity number+;e.g. ® is the same entity as ®]There is no need for us to memorize so many entities names!
HTML (7/10) • HTML LinksThere must be Hyperlinks in a Hypertext. Two types of links are used in HTML: Href and Anchor.1) HTML uses the <a> tag to create a link to another document.2) <a> tag accepts href, name, and target as attributes e.g. <a href="http://www.hw.ac.uk/" target="_blank">HWU</a> <a name="label">A label</a>3) To link directly to a labeled section, add a # sign and the name of the anchor to the end of a URL e.g. <a href="#label">Jump to the label</a>Exercise 7: An image as a link <html><body> <p>An image as a link: <a href="www.hw.ac.uk"> <img border="0" src="www.macs.hw.ac.uk/~lf16/hw.bmp" width="65" height="38"> </a></p></body></html>
HTML (8A/10) • HTML Forms • HTML Forms are used to select different kinds of user input. • A form is an area that can contain form elements. • Typical form elements: text fields, radio buttons, checkboxes, dropdown lists and so on. • Exercise 8: Try out the following form <html> <head><title>Personal Info</title> </head> <body> <form method="POST" action="NONE"> <fieldset style="width: 413; height: 195; padding: 2"> <legend>Personal Info</legend> Sex:Male<inputtype="radio" value="V1" checked name="R1"> Female<input type="radio" name="R1" value="V2"><br>
HTML (8B/10) Birthday:<inputtype="text" name="T1" size="10" value="DD/MM/YYYY"><br> Interests:Fictions<inputtype="checkbox" name="C1" value="ON"> Music<input type="checkbox" name="C2" value="ON"> Sports<input type="checkbox" name="C3" value="ON"> Shopping<input type="checkbox" name="C4" value="ON"><br> Major:<select size="1" name="D1"> <option selected>Computer Science</option> <option>Finance</option> <option>Linguistics</option> <option>Marketing</option> <option>Physics</option> </select><br> Any other comments:<br> <textarea rows="6" name="S1" cols="54"> Less than 200 words please.</textarea><br> <input type="submit" value=" OK " name="B1"> <input type="reset" value="Reset" name="B2"></fieldset></form> </body> </html>
HTML (9/10) • Omitted: HTML Frames, Tables, Lists, Images, Colour, Background, Layout, Font, Events etc. • HTML StylesAll formatting info can be moved out of the HTML document and into a separate style sheet. • Internal & External Style SheetsAn external style sheet is ideal when the style is applied to many pages, whereas an internal style sheet should be used when a single document has a unique style. Internal styles are specified inside the <head> element of an HTML page. External styles are specified in a separate CSS file. • Cascading Style Sheets (CSS)When multiple style sheets coexist, they will cascade into one – thus CSS. Internal styles will “override” external ones.
HTML (10/10) • SummaryIn this section we have quickly reviewed some rudimental HTML syntax and worked on a few practical exercises. The rest of this module requires you being able to create simple HTML pages, and more importantly, to understand other people’s HTML codes, which could be complex, especially HTML Forms and Form Elements. Exercise 9: a CSS example http://www.w3schools.com/css/demo_default.htm