HYPERTEXT MARKUP
LANGUAGE
Navigation, LISTS, Images, Iframes, AND Inputs
COS216
AVINASH SINGH
DEPARTMENT OF COMPUTER SCIENCE
UNIVERSITY OF PRETORIA
HTML - ATTRIBUTES
• Some attributes exists for all HTML objects
• Often used by Document Object Model (DOM) manipulation to access objects
through JavaScript
• Identifier (id)
• A unique ID to disguise one element from the other
• Class (class)
• Multiple elements can belong to the same class, one element can belong to multiple
classes
• Can be used by DOM or to assign the same CSS to all elements belonging to a class
<div id="box1" class="redbox thickborder"></div>
<div id="box2" class="redbox thinborder"></div>
HTML - NAVIGATION
• Various objects exist to structure your page and
handle navigation: Header (logo, title, etc)
• nav: A navigation bar with links to other Navigation (menu with “About”, “Contact Us”, etc)
parts of your site
• header: A header at the top of your page
which may contain a logo and navigation Body (content of the page)
• footer: A footer at the bottom of the page
which may contain the copyright and year Footer (copyright, year, link to T&C, etc)
• Typical structure of a website:
HTML - LINKS
• Add a link to another page
• Links are the basis on which HTML was built
• If a link is clicked, navigates to that page
• Most browsers display links in blue color and underlined
<a href="https://coinmarketcap.com">View Crypto Prices</a>
<a href="subdirectory/file.html">View Subpage</a>
• The href attribute specifies an absolute URL or relative path
• The inner text is displayed on the site and is clickable
HTML - LISTS
• Add lists with list items (li)
• Ordered list (numbered)
• ol element
• type attribute: specifies the number/letters to use for the list (1, A, a, I, i)
• start attributes: specifies at which number to start
• Unordered list (bullet points)
• ul element
• type attribute: specifies the bullet type (disc, square, circle) not supported in HTML5
anymore
HTML - LISTS
<ol type="A"> <ul>
<li>Bitcoin</li> <li>Bitcoin</li>
<li>Ethereum</li> <li>Ethereum</li>
<li>Cardano</li> <li>Cardano</li>
</ol> </ul>
HTML - IMAGES
Wide Support Limited
• Add images to websites
Support
• Image formats depends on browser
support JPG & JFIF SVG
• Choose format according to support
and your requirements
PNG APNG
GIF WEBP
BMP
TIFF
HTML - SVG
• Scalable Vector Graphics (SVG)
• XML based vector image format
• Images are not stored as raster pixels, but as vectors
• Vectors are calculated mathematically, zoom in/out
without loosing quality
• File sizes are a lot smaller than rasters
• Can manipulate SVG through CSS/JS (eg: color,
shadows, point width, etc)
• Can only store vectors, not pixels, therefore not suited
for photos
• Always try to use JPG or PNG
HTML - IMAGES
Format Compressed Transparency Animation Use Case
JPG Yes No No Use for larger images, artwork, and
photos.
PNG Yes Yes Yes (APNG) Use for discrete graphics, icons and
comics.
GIF Yes Yes (limited) Yes Try to avoid. De facto standard for
animations. However, the image
quality is poor. Try to use APNG for
animations.
BMP No No No Avoid at all cost
TIFF No No No Avoid at all cost
SVG Yes (vector) Yes (vector) Yes For high quality resolution with small
(limited) file size. Some browsers have limited
SVG support (eg: animation). SVGs
can also be manipulated from CSS
(eg: color, borders, shadows).
HTML - IMAGES
• Does not need a closing tag
<img src="test.png" alt="Test Image" height="64" width="64" />
• Attributes:
• Source (src) the source URL of the image (relative or absolute)
• Alternative Text (alt): Text to display if the image cannot be loaded
• Size (width & height): The size of the image. Images are resized by browser to this size.
If no size is provided, uses the resolution of the image
• Other less used attributes available
HTML - IMAGES
• Image source can be an absolute URL
<img src="http://bitcoin.org/logo.jpg" />
• Image source can be a relative path
• Image is in the same directory as the current HTML file
<img src="logo.jpg" />
• Image is in a parent directory of the current HTML file
<img src="../logo.jpg" />
• Image is in a subdirectory of the current HTML file
<img src="images/logo.jpg" />
HTML - IMAGES
• Image source can also be Base64
• Directly embedded in the HTML page
• Does not require an additional file to be retrieved
• Base64 is about 30% larger than the binary data
• Only use for small images, such as icons or logos
<img src="data:image/jpeg;base64,LzlqLzRBQ..." />
HTML - IFRAMES
• Displays an HTML document inside another HTML document
• Can be a document from the same or an external site
• Basic asynchronous call
• Frame is loaded in the background
• Separate from main site
• First version of AJAX (discussed later in the semester)
<iframe src="demo.html" height="200" width="300"></iframe>
HTML - IFRAMES
• Attributes are similar to images
• Source (src) the source URL of the iframe
• Size (width & height): The size of the iframe
• The source can be:
• Absolute URL to own or external site
• Relative path to other HTML document on same site
HTML - IFRAMES
HTML - IFRAMES
• Google website
HTML - CORS
• Google iframe does not load
• Error message in browser console:
• Refused to display 'https://www.google.com' in a frame because it set 'X-Frame-Options'
to 'sameorigin'
• Cross-Origin Resource Sharing (CORS)
• Additional HTTP headers are set in requests
• Based on the HTTP headers, the server can reject access to resources if the request
has a different origin (domain) than the destination (server domain)
• Used to eliminate abuse by other websites using your resources (HTML, JS, images,
etc)
• Apache can be configured (or .htaccess file) to allow any/some/none requests from
external domains
HTML - INPUTS
• HTML supports a range of different input elements
• Used to get input from the user
• HTML only provides the input elements
• HTML cannot do anything with the input
• JavaScript is needed to read the input and do something with it
• JavaScript has events (text changed, mouse click, etc) to help with this
• JavaScript events can be specified as a HTML attribute
• Traditional HTML inputs:
• Buttons
• Text Fields
• Text Areas
HTML - • Password
INPUTS • File
• Image
• Checkboxes
• Radio Buttons
• Hidden
HTML - INPUTS
• New HTML inputs:
• Color
• Date
• Date Time
• Time
• Month
• Week
• Email
• Range
• Search
• Number
• Url
HTML - INPUTS
• There are two categories of inputs
• Using separate elements: textarea, button
• Using the input element, typically part of a form: the remainder
• Many of these inputs are very similar, but have some extra functionality
• Eg: password is a text field obfuscated with dots or asterisks
• Eg: url is a text field that verifies that the input has a valid URL format
• Eg: submit is a button for submitting a form
• Eg: image is a button that is styled with an image
HTML - FORMS
• A form is a grouping of input elements
• Data from a form is typically send to the server
• PHP on the server then reads/uses these values
• The form specifies the destination PHP script (action)
• The form specifies the HTTP method, such as GET or POST (method)
HTML - FORMS
• Example: login form has 3 inputs
• Username
<form action="page.php" method="post">
• Password
Username: <input type="text" name="user"><br>
• Submit button Password: <input type="password" name="pass"><br>
<input type="submit" value="Login">
</form>
HTML - BUTTON
• Standard button
<button type="button">Click Me!</button>
• Submit button for a form
<input type="submit" value="Click Me!">
• Button with an image
<input type="image" src="submit.png" alt="Submit" width="48" height="48">
HTML - TEXT
• Text input field
<input type="text" name="username">
• Obfuscated password field
<input type="password" name="pass">
• Text area for paragraphs
<textarea rows="4" cols="50">Some long paragraph</textarea>
HTML - HIDDEN
• Hidden text input field
• Hidden to the user
• Can be used to add control data that is submitted to the server
<input type="hidden" name="hiddenvalues">
HTML – CHECK BOXES
• A group of check boxes
• Multiple boxes can be selected at the same time
• The name attribute specifies the group the button belongs to
<input type="checkbox" name="btc" value="btc"> Bitcoin Price<br/>
<input type="checkbox" name="eth" value="eth" checked> Ethereum Price<br/>
<input type="checkbox" name="ada" value="ada" checked> Cardano Price<br/>
HTML – RADIO BUTTONS
• A group of radio buttons
• Only a single button can be selected at the same time
• The name attribute specifies the group the button belongs to
<input type="radio" name="prices" value="btc"> Bitcoin Price<br/>
<input type="radio" name="prices" value="eth" checked> Ethereum Price<br/>
<input type="radio" name="prices" value="ada"> Cardano Price<br/>
HTML – FILES
• Upload files to the server
• Always requires a button press and selection dialog
• For security reasons, otherwise websites can access your personal files without
permission
• Can restrict the selected file type (eg: only images)
<input type="file" name="profilepic" accept=".jpg, .jpeg, .png">
QUESTIONS
