CS1102 Introduction to Computer Studies Lecture 04 - Web Development: HTML and CSS PDF

CS1102 Introduction to Computer Studies Not to be redistributed to Course Hero or any Lecture 04 other public websites Web Development: HTML and CSS Semester...

CS1102 Introduction to Computer Studies Not to be redistributed to Course Hero or any Lecture 04 other public websites Web Development: HTML and CSS Semester A, 2024-2025 Department of Computer Science City University of Hong Kong Agenda Webpage and Source Code HTML CSS Construct your own webpage Howard Leung/ CS1102 Lec 04 2 Agenda Webpage and Source Code HTML CSS Construct your own webpage Howard Leung/ CS1102 Lec 04 3 Webpage and Source Code We can view a webpage on a browser that displays information with text, images, audio, video. A webpage contains text marked up with HTML tags, often with CSS and JavaScript The web browsers render the source HTML into a more user-friendly webpage gives instruction to the web browser about the version of HTML used for that page. In CSS this case, it is HTML5. https://www.w3schools.com /tags/tag_doctype.asp JavaScript Code Example: lec04-01-web-structure.html HTML tags Howard Leung/ CS1102 Lec 04 4 Components in a webpage source code HTML: HyperText Markup Language (HTML) uses a set of codes called tags to describe the structure of a webpage Note that HTML is NOT considered as a programming language because it doesn’t have the ability to perform computational tasks or logical steps CSS: Cascading Style Sheets (CSS) describes how the HTML elements should be displayed by specifying the fonts, colors, layout and placement of these HTML elements JavaScript: JavaScript is a programming language that can provide instructions for a browser to dynamically generate content for a website or enhance the website interactivity Howard Leung/ CS1102 Lec 04 5 Code Editor A webpage source code is stored in text format so a simple editor (e.g., Notepad) can be used However, it is better to use a code editor such as Komodo Edit or Sublime Text because they provides additional support for writing code, e.g., syntax coloring, syntax error checking, etc. Komodo Edit Sublime Text Howard Leung/ CS1102 Lec 04 6 Demo Code All the Demo Code for this lecture can be found on Canvas Howard Leung/ CS1102 Lec 04 7 Structure of a Webpage HTML tags are placed inside angle brackets Most HTML tags work in pairs with a starting tag / opening tag (e.g., ); and an ending / closing tag (e.g., ) But there are some exceptions known as empty elements, such as Each HTML file should have one html start tag and only one html tag, head section and body section head section The indentation improves the visual layout of the HTML code so that it is body section easier to see the structure, but has no effect on the browser Howard Leung/ CS1102 Lec 04 html end tag 8 Agenda Webpage and Source Code HTML CSS Construct your own webpage Howard Leung/ CS1102 Lec 04 9 HTML features to explore Let’s build a webpage from scratch Adding a title of the webpage Creating headings with multiple levels Formatting paragraphs Generating bullet list and numbered list Inserting links to the webpage Displaying images on the webpage Creating a table Howard Leung/ CS1102 Lec 04 10  tags always go inside the element, and are HTML: Title typically used to specify character set, page description, keywords, author of the document, and viewport settings. The page title can Metadata will not be displayed on the page, but is machine parsable. help you quickly identify a webpage on a browser if you open many tabs be used by search engine to determine the relevance with respect to keyword search be used as the default title when you bookmark your webpage Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. The page title is added between the and tags in the HTML file Code Example: lec04-02-HTML-title.html Howard Leung/ CS1102 Lec 04 11 HTML: Headings Webpage headings highlight different sections on the webpage so visitors can quickly scan for information of interest. There are 6 levels of headings: , , , , , is the most important heading is the least important heading Code Example: lec04-03-HTML-heading.html Howard Leung/ CS1102 Lec 04 12  To display a less than sign () The and tags are used to Browser will define a paragraph inside automatically insert line spacing between successive tags to &lt; and &gt; to represent < and > in the text, enhance readability respectively, to prevent the browser from rendering them as tags. Line breaks Line breaks and line spacing in the HTML file are not matched with the way the corresponding text is displayed on the browser Howard Leung/ CS1102 Lec 04 13 Code Example: lec04-04-HTML-paragraph.html HTML: Lists A list enhances the presentation of information under a category with many items e.g., which of the following webpage has better readability to you? Howard Leung/ CS1102 Lec 04 14 HTML: Lists (2) An unordered list displays items with bullets and define the beginning and end of an unordered list and enclose each list item HTML Browser display https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml_lists4 An ordered list displays items with automatic numbering and define the beginning and end of an ordered list and enclose each list item HTML Browser display https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml_lists Howard Leung/ CS1102 Lec 04 15 HTML: Lists Example With lists, it would be easy to insert or delete items, or Code Example: lec04-05-HTML-lists.html rearrange the order of the items. For numbered list, there is no need to worry about the numbering even when the items are Howard Leung/ CS1102 Lec 04 modified because the numbering is automatic 16 HTML: List Attributes Sometimes an attribute can be defined in the start tag with the format name=“value” to provide additional information For example The attribute type can be set with value “A” for an ordered list so that the number style will be A,B,C,… instead of the default 1,2,3,… The attribute start can be set with a numeric value for an ordered list that corresponds to the start number of the first item instead of the default value of 1 Code Example: lec04-06-HTML-lists-attributes.html Howard Leung/ CS1102 Lec 04 17 HTML: Links A hyperlink, or simply called a link, can be text or image in a webpage that a user can click to navigate to another webpage The anchor tag is used to link to another hypertext location Code Example: lec04-07-HTML-simple-link.html The href attribute value contains the URL (Uniform Resource Locator), i.e., the link destination Howard Leung/ CS1102 Lec 04 18 HTML: Link Target By default, the link destination will be opened in the same browser tab or window Code Example: lec04-08-HTML-link-target.html With the attribute target=“_blank”, the linked destination is opened in a new window or tab Howard Leung/ CS1102 Lec 04 19 HTML: Link Actions A hyperlink can also be used to perform other action than navigating to another webpage Run an email client (if installed) to compose email to a specific recipient Download a file Code Example: lec04-09-HTML-link-action.html Howard Leung/ CS1102 Lec 04 20 HTML: Images Images are always stored as separate files. The tag can be used in the HTML code to provide instruction to the browser for displaying an image on a webpage folder lec04-10-HTML-image.html Code Example: lec04-10-HTML-image.html character.png Howard Leung/ CS1102 Lec 04 21 HTML: Images (2) The alt attribute is used to specify the alternate text for the image Code Example: lec04-11-HTML-image-alt.html The alternate text has the following functions: 1. Alternate text will be displayed instead of an image when the image cannot be displayed in case the image does not exist or there is a typo in the image filename. 2. Visually impaired users may not be able to view the image but are still able to understand the image content by using screen reading software to read aloud the alternate text for the image Howard Leung/ CS1102 Lec 04 22 HTML: Empty Element Note that the img tag does not have a corresponding end tag E.g., works alone and there is no such thing as HTML elements that do not require an end tag are called empty elements Other examples of empty elements: : add a line break : add a horizontal rule (line) Code Example: lec04-12-HTML-empty-element.html Howard Leung/ CS1102 Lec 04 23 HTML: Image Link You have seen how to make a text hyperlink before. You can also make an image hyperlink so that the same link actions can be performed when the image is clicked Code Example: lec04-13-HTML-image-link.html Howard Leung/ CS1102 Lec 04 24 Absolute URL vs Relative URL The URL can be specified either as an absolute URL or a relative URL An absolute URL includes the full path Usually absolute URL is used for linking to files from external websites (not on the same web server) Other examples of full URL: Relative URL specifies the location of a file relative to the location of the current file Other examples of relative URL: Howard Leung/ CS1102 Lec 04 25 File Path Files on a website may be placed on different folders and the path needs to be specified in order to link to a file placed at a different folder www.mysite.com index.html html image info.html info.html logo.png index.html Code Examples: index.html and html/info.html../ refers to the parent folder, i.e., go up one level in the folder structure Howard Leung/ CS1102 Lec 04 26 HTML: Entities (1) For displaying Howard on a webpage, if you directly type the above in the HTML file, the email address will not be displayed, because the browser considers it as a tag since it is enclosed by A character entity can be used in this case which aims to represent reserved character or symbol A character entity can be defined by &entity_name; OR &#entity_number; to avoid being render as tags, can type Some examples of character entities (more can be found from either entity name; DEC; HEX to avoid https://www.w3schools.com/html/html_entities.asp): Symbol Entity Name Entity Number (DEC) Entity Number (HEX) < &lt; &#60; &#x3C; non-breaking > &gt; &#62; &#x3E; space blank space &nbsp; &#160; &#xA0; HTML Code Example: lec04-14-HTML-entities.html Browser display Howard Leung/ CS1102 Lec 04 27 HTML: Entities (2) Mathematical symbols, currency symbols, non-English letters, or even emojis can be shown on browser by using character entities in HTML More symbols can be found from https://www.w3schools.com/html/html_symbols.asp More emojis can be found from https://unicode.org/emoji/charts/full-emoji-list.html Code Example: lec04-15-HTML-more-symbols.html Howard Leung/ CS1102 Lec 04 28 Agenda Webpage and Source Code HTML CSS Construct your own webpage Howard Leung/ CS1102 Lec 04 29 CSS Cascading Style Sheets (CSS) describes how the HTML elements should be displayed by specifying the fonts, colors, layout and placement of these HTML elements Although you could provide the same formatting and layout instructions using HTML, it is better to use CSS as a single CSS rule can be applied to multiple elements so it saves the efforts for defining the appearance of individual HTML elements one by one. The same CSS can also be applied across webpages under the same website Howard Leung/ CS1102 Lec 04 30 CSS: Simple Example CSS can be embedded in the head section of the webpage, with the styles defined inside the tags Declaration Selector Property Value This style sets all headings in red color Code Example: lec04-16-CSS-simple-example.html Howard Leung/ CS1102 Lec 04 31 CSS: Element Selector A CSS style can be applied to different HTML elements by using the corresponding HTML tag as element selector Code Example: lec04a-17-CSS-element-selector.html Howard Leung/ CS1102 Lec 04 32 HTML: tag if you only want to specify a part of text to be colored: The tag can be used to enclose a part of the text such that the style can be applied. Nothing, if you do not give it some special style (or add an attribute for specific purpose, e.g. an event handler) Does.. do anything if we do not set any style for it? even the bullet point will be colored in red if you place the span tag outside the sector but if : the whole text will be colored in red Code Example: lec04-18-HTML-span-tag.html excluding the bullet point Howard Leung/ CS1102 Lec 04 33  different design outlay for each individual elements*** HTML: ID and CSS: ID Selector sometimes some of the text wanted to be colored in green and some of the text wanted to be colored in red the way to distinguish is to use ID labelling individual element Problem of span: labelling all elements under span will follow the same design layout Each html element can be labeled with the attribute id. A CSS style can be applied to an element by specifying its id no two element should be assigned with the same id name, each of the id name should be unique The hash # followed by the id is used to specify an id selector Code Example: lec04-19-CSS-id-selector.html Each id attribute value used to label an html element should be unique, i.e., it can only be used once and no two html Howard Leung/ CS1102 Lec 04 elements should have the same id attribute value 34 HTML: Class and CSS: Class Selector Each html element can be labeled with the attribute class. A CSS style can be applied to all elements with the same class attribute value same design outlay for a particular class of elements ; define things as the same class by using the same class name in CSS style Code Example: lec04-20-CSS-class-selector.html The period. followed by a class name is used to specify a class selector Different html elements can be labeled with the same class attribute value Howard Leung/ CS1102 Lec 04 35 CSS: Group Selector ***can group all sector, class and id together and decide the same design layout to the group A CSS style can be applied to a group of elements Code Example: lec04-21-CSS-group-selector.html The comma , is used to separate individual selectors to specify a group selector Howard Leung/ CS1102 Lec 04 36 CSS: Color There are other ways to set color properties in CSS The color can be specified by the R,G,B values in the form of 1. 3 decimal numbers ranging from 0-255, or 2. 6 hexadecimal nibbles where every 2 hexadecimal nibbles represent each of R, G, B value respectively Code Example: lec04-22-CSS-color.html Howard Leung/ CS1102 Lec 04 37  specify 3 font, CSS: Font whether this font is available in your device if “Courier New” is available, then the font will be it if there is no “Courier New” on your device, will move on to Helvitica, and so on for Georgia if these three fonts are unavailable A CSS style can be applied to change various font properties then will just show your text in default font the quotation mark for Courier New” is due two there is two words contain in this font name, for hevitica and georgia, you dont have to use quotation mark but you can also use it for clear demonstration The font-family property can list fonts names. If a browser does not support the first font, it will then try the next font. Code Example: lec04-23-CSS-font.html Howard Leung/ CS1102 Lec 04 38  for div: enclose a section, not just a part of text, and one div can be putted inside another HTML: tag div for span: only specifiy a part of text add the id inside the div then you can assign the one design layout to all element in the div id The tag is often used to group different parts of a webpage together to form a section such that a style can be applied. For overlapping blue and green inside red div and there is different color/bg ground color/ fontstyle*** eg div1: color: red div2: color: yellow but div2 is inside div1 —> it depends on different browser consistency(out of syllibus) Code Example: lec04-24-HTML-div-tag.html Howard Leung/ CS1102 Lec 04 39 HTML: Table (1) A table can be defined in HTML using the following tags : defines a table : defines a table row : defines a table cell Table Example 1 HTML Browser display CSS can be added to show borders on the table table: outer border td: inner border =2 border as result Howard Leung/ CS1102 Lec 04 Code Example: lec04-25-HTML-table-example1.html 40 HTML: Table (2) A table header can be defined in HTML using the following tag : defines a table header cell tag bolded the content in table Table Example 2 HTML Browser display Remember to add the th element selector in CSS to set its border, otherwise … Code Example: lec04-26-HTML-table-example2.html Howard Leung/ CS1102 Lec 04 41 HTML: Table (3) Neighboring cells in the same column or row can be merged by setting the attribute rowspan and colspan Table Example 3 HTML Browser display original in the red box of course work, their should be 3 thing rowspan=“3” sets this cell to span 3 rows, i.e., merges 3 cells on the same column no left row for project and midterm because is already set as a merged colspan=“2” sets this cell to Course work in the span 2 columns, i.e., merges 2 first column cells on the same row Code Example: lec04-27-HTML-table-example3.html Howard Leung/ CS1102 Lec 04 42 CSS: Box Model Any HTML element can be considered as a box distance between Margin border and content: Border Padding Padding distance between the Content page and border: Margin Code Example: lec04-28-CSS-box-model.html Howard Leung/ CS1102 Lec 04 43 CSS: Display (1) The display of some HTML elements may be block-level or inline by default this block cannot be put in the same line: Block-level o The element starts on a new line and takes up all the available width =block-level o Examples of block-level elements by default: , , , , etc. Inline o The element does not start on a new line and only takes up required width o Examples of inline elements by default: , , , etc. this block can be put in the same line: The display property can be changed by CSS =inline display: block; changes to block-level element(s) display: inline; changes to inline element(s) display: none; hides the element(s) Howard Leung/ CS1102 Lec 04 44 CSS: Display (2) display in block level: add the block: change from inline to block level display: inline : change from block level to inline hide the block Code Example: lec04-29-CSS-display1.html Code Example: lec04-30-CSS-display2.html Howard Leung/ CS1102 Lec 04 45 CSS: Float (1) An HTML element can be set to float on the left or right by specifying the corresponding float property value in CSS Code Example: lec04-31-CSS-float-none.html Code Example: lec04-31-CSS-float-left.html Code Example: lec04-31-CSS-float-right.html Howard Leung/ CS1102 Lec 04 46 CSS: Float (2) if it is not setted with float then the 2nd boxes will go the the next line because the border of 1st box is extend to the end of the current line Code Example: Code Example: Code Example: Code Example: Lec04-32-CSS-float-div0.html Lec04-32-CSS-float-div1.html lec04-32-CSS-float-div2.html lec04-32-CSS-float-div3.html Howard Leung/ CS1102 Lec 04 47  if you want the only the 1st box in the current line but dont CSS Clear want the border of 1st box extend to the end of the current line then use clear: left because 1st box start with left hand side Previous left/right float can be cleared using the clear property with matching left/right in CSS to make the element start on a new line Code Example: Code Example: Lec04-33-CSS-clear- lec04-33-CSS-clear-box1.html Code Example: Code Example: unspecified.html lec04-33-CSS-clear-box2.html lec04-33-CSS-clear-box3.html Howard Leung/ CS1102 Lec 04 No change as box1 is already starting on a new line 48 Agenda Webpage and Source Code HTML CSS Construct your own webpage Howard Leung/ CS1102 Lec 04 49 Construct your own webpage using GitHub Page GitHub is an Internet hosting service for software development and version control using Git. There are lots of open-source codes and software on GitHub. How to use Git? You can also install GitHub Desktop for more straightforward version control Create a github repo named [YourAccountName].github.io and push some HTML codes to the GitHub, then your personal website will be available on https://[YourAccountName].github.io. Howard Leung/ CS1102 Lec 04 50 GitHub Page: example https://github.com/Netflix/netflix.github.com Howard Leung/ CS1102 Lec 04 51 Existing templates and frameworks https://www.w3schools.com/w3css/w3css_templates.asp https://getbootstrap.com/docs/5.3/examples/ Howard Leung/ CS1102 Lec 04 52 Lesson Summary HyperText Markup Language (HTML) uses a set of codes called tags to describe the structure of a webpage Most HTML tags come in pairs, with a few exceptions that are empty elements Cascading Style Sheets (CSS) describes how the HTML elements should be displayed by specifying the fonts, colors, layout and placement of these HTML elements Creating a webpage becomes pretty easy nowadays with existing frameworks, oftentimes we do not need to start from scratch Howard Leung/ CS1102 Lec 04 53 Reference HTML5 Tutorial http://www.w3schools.com/html Web Hypertext Application Technology Working Group (WHATWG) http://www.whatwg.org CSS Tutorial http://www.w3schools.com/css/ Howard Leung/ CS1102 Lec 04 54