>> HTML: Tags – Hyperlink, Media, Lists

Web-Based Systems - Misbhauddin Review Each HTML page consists of 5 basic elements Each HTML element has a tag and content (optional for some tags) Each HTML element can be either Paired Element or Void Element HTML Elements can be either Inline or Block level There are different types of HTML Elements Text-based Elements (h1….h6, p, strong, em) Structure-based Elements (div, span, header, footer, nav, section, article, aside) Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Creating Hyperlinks Hyperlinks: ability to link from one page to another Use the anchor tag <a> It is an inline-level element Attribute “href” Tells the link where to go href stands for Hyperlink Reference <a href=“http://www.kfu.edu.sa”>King Faisal University</a> Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Paths in HTML The href attribute in <a> tag specifies the path to another location You can specify different types of paths Paths Relative Absolute Links to other websites with full domain name Links to other pages in the same website Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Relative Path /root /img /css /profile index.html contact.html logo.png bg.png style.css /admin main.php admin.php Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Relative Path Accessing file within the same directory (level) Use the file name only in href <a href=“filename.ext” Accessing file in the directory below the current one Use the name of the directory separated by “/” for each level <a href=“dir/dir2/dir3/file.ext”></a> Accessing file in the directory above the current one Use “..” to go up each level from the current level <a href=“../../file.ext”></a> Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Absolute Path Use the complete path of the page along with the domain name Used when hyperlinking to a page on another website Example http://www.kfu.edu.sa/ar/BannerSystem/Pages/login.aspx <a href’” http://www.kfu.edu.sa/ar/BannerSystem/Pages/login.aspx”>KFU Banner</a> Web-Based Systems - Misbhauddin

Links in HREF Attribute To a page in the same website – Relative Paths To a page in another website – Absolute Paths Send an email Use the text mailto: before the email address <a href=“mailto:mmisbhauddin@kfu.edu.sa”>Send me an email</a> Link to part of the page Remember “Back to Top” Mark part of the page with and id attribute (fragments) Use “#” before the name of each page fragment to go that part of the page <a href=“#top”>Back to Top</a> Web-Based Systems - Misbhauddin

Destination of the Hyperlink The anchor (<a>) tag has another important attribute called target It specifies where a link opens when clicked Options On the same tab target=“_self” On a different window/tab (based on your preference) target=“_blank” Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Try Now Exercise Open the previous exercise done in the class Within the <header> element, create a <nav> element below the h1 tag. Within the <nav> element, add the following links Objective Education Experience Contact Note: for each href, add the value “#” only (we will do that later in the course) Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin IMG Tag Displays Image on the Page It is a Void element (self-closing) It is an Inline Element Attribute “src” Includes the location of the photo or URL Attribute “alt” Displays text when image is not available Used also read the image description for physically challenged (Blind) computer users <img src=“img/kfu.png” alt=“KFU Logo”/> Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Other Media Tags Audio Tag <audio>……..</audio> Adds audio to your page Use src attribute to specify the source of the audio file Video tag <video>……..</video> Adds video to your page Use src attribute to specify the source of the video file to play Note These tags are for information only and out of the scope of this course Web-Based Systems - Misbhauddin

Web-Based Systems - Misbhauddin Nesting of Tags Tags also nest Should close them in the right order: The most recently opened tag should be the first one closed Web-Based Systems - Misbhauddin

Web-based Systems | Misbhauddin List Tags HTML provides for three kinds of lists unordered list (list with bullets beside each item) ordered list (list with numbers beside each item) definition list (lists terms and their definitions) Lists can be nested E.g. You can have an ordered list inside a definition list Web-based Systems | Misbhauddin

Web-based Systems | Misbhauddin Unordered List <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> first item second item third item TRY NOW Convert the list of links on your page to be as unordered lists Web-based Systems | Misbhauddin

Web-based Systems | Misbhauddin Ordered List <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> first item second item third item TRY NOW Add an ordered list to your page Web-based Systems | Misbhauddin

Web-based Systems | Misbhauddin Definition List <dl> <dt>first term</dt> <dd>its definition</dd> <dt>second term</dt> <dt>third term</dt> </dl> first term its definition second term its definition third term its definition TRY NOW Add a definition list to your page Web-based Systems | Misbhauddin

Web-Based Systems - Misbhauddin Summary HTML has different types of Elements Anchor Elements are used for Hyperlinking Pages/ resources from the same website, from different websites and even within the same page Media Elements – Image, Audio, Video List Elements Web-Based Systems - Misbhauddin