Web Development Book PDF

LINK ELEMENT Hyperlinks - HTML LINKS In HTML, the “hypertext” part of the name means that links can be used to connect to other pages. A HYPERLINK , better known as a link, can be clicked to take the user to a new website. A hyperlink can be a piece of text, an image or basi...

LINK ELEMENT Hyperlinks - HTML LINKS In HTML, the “hypertext” part of the name means that links can be used to connect to other pages. A HYPERLINK , better known as a link, can be clicked to take the user to a new website. A hyperlink can be a piece of text, an image or basically any other element. some-shop.com youtube.com LLL Links also make the NAVIGATION MENU on a website possible. This menu is made up of a collection of links, each directing you to a specific page. These are all links, simply presented as images. The ANCHOR ELEMENT is used to add links to websites. Along with placing and around the text of each link, you need to add the href attribute to specify the web address where users will be redirected. Attribute that holds the URL which opens when the user clicks the text Visit Youtube Displayed text RRR  FOR EXAMPLE, let’s create two simple html files on our desktop called “page1.html” and “page2.html” Tip: In Visual Studio Code, open the files, type “!” and press Return to generate a basic HTML template. The body content for “page1.html” should be: Welcome to page 1 Go to page 2 Now, using the same logic, create “page2.html” with a link back to page1.html. Now we’ve linked two pages together. “./ ” before the file name means "current directory," indicating that the “page2.html” file is in the same folder as the current page. This is a RELATIVE URL. You could also enter the complete file path of the file, e.g. “C:\Users\heisenberg\Desktop\page2.html”. This is called an ABSOLUTE URL. You should not use absolute URLs, if other’s want to use your code they would have to change every absolute URL to their needs. LLL The current code will navigate to page2 in the same tab. To open page2 in a new tab we can use the target attribute. We have to set the value to “_blank ” which tells the browser to open the URL in a new tab: Go to page 2 You can also scroll to specific elements within a website by setting an ID on those elements. An ID is a unique identifier that you assign to an HTML element: Go to Section 1 Do not forget to put a # before the ID When you click this link, the browser looks for the element with the ID “section1” and scrolls directly to it. We can even go ahead and open the users’s default email client to start a new email to the specified address: Pixabay and picsum.photos are great resources that offer free images in various sizes. If you find a picture you like online, right-click it and copy the image URL. LLL If the image is too big or too small, we can change the size using the WIDTH and HEIGHT attributes and setting them using pixel values: What the browser will display if... IMAGE LOADS IMAGE FAILS TO LOAD A few guys racing with shopping carts on the street RRR  FOR EXAMPLE, let’s create a image that when clicked will open youtube in another tab: VIDEOS The VIDEO ELEMENT is used to embed videos. Unlike the element, it requires a closing tag. The SOURCE ELEMENT is placed inside the element to specify the location of the video file. “src” specifies the “type” value has to be a location of the video file MIME type A MIME TYPE indicates indicates the format of a file. Each MIME type consists of a type and a subtype, seperated by a slash (e.g. “video/mp4”, “text/plain” “application/pdf”, “image/png”, “audio/mpeg”) LLL You can use multiple tags to provide different formats for better browser compatibility. Let’s embed a example video: Your browser does not support HTML video. Fallback text, if browser does not support any of the video formats This would embed the video, however we do not have any controls to start the video. If we wanted to have video controls (play/pause, volume,...) we can set the CONTROLS boolean attribute on the video element.... BOOLEAN ATTRIBUTES (either true or false) don’t require a value, their presence alone indicates a “true” state, while their absence indicate “false”. RRR This is what the video looks like now Other useful attributes: Attribute Description Boolean attribute, that starts playing the video autoplay automatically when the page loads. (Blocked by some browsers if video is not muted) loop Boolean attribute, plays video continuosly muted Boolean attribute, mutes sound of the video Takes Image URL as value, which gets displayed poster before the video starts playing (Preview) width Width of the displayed video, in pixels height Height of the displayed video, in pixels LLL AUDIO The AUDIO ELEMENT is used to play audios. The HTML format is basically the same as for the element, but specifically for audio files: Your browser does not support the audio element. This is what the audio element looks like now As of 2024, the only supported audio formats are MP3, WAV, and OGG. Other useful attributes: “autoplay”, “muted”, “loop”, “muted” RRR BROWSER COMPATIBILITY To ensure our website works across different browsers, including older ones, it's important that all the elements and features we use are supported by all browsers. This is where caniuse.com comes in handy. By checking feature compatibility, we can visualize what HTML, CSS or JavaScript features are available on which browsers. Example: Browsers which support Webm video format Percentage of users that can use the feature without problems Browser versions Supported Partially Supported Not Supported Don’t worry if older browsers show limited support — what matters is that newer browsers widely support the feature you want to use. LLL  If a site does not work fine, try out another browser! RRR  TABLE ELEMENTS TABLES Tables present data in a structured, easy-to-read format. The TABLE ELEMENT is used to create tables. Inside the table element, we can create rows using. Within each row, table data (cells) can be added using. To create a header, we use instead of. Header 1 Header 2 First row Data 1 Data 2 Second row LLL Browser will display: Header 1 Header 2 Data 1 Data 2 While tables have (deprecated) border attributes, the modern way is to style them with CSS, which we’ll cover soon! For now, let’s picture the lines separating the cells. To help organize data into clear sections use , ,. It’s optional but recommended. NameAge Head John25 Body Average25 Footer RRR MERGING CELLS You can merge table cells using the colspan attribute to span (= combine) columns or rowspan to span rows. These attributes can only be applied to a cell ( or ). Header 1 Header 2 Specify the amount of rows you want to span, Header 3 in this example 2 Merged Row Merged Cell (Colspan) Cell 4 Specify the amount of columns you want to Cell 5 span, in this example 2 Cell 6 Cell 7 Cell 8 LLL  Header 1 Header 2 Header 3 Merged Cell (Colspan) Merged Row Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 TABLE CAPTION The CAPTION ELEMENT is used to add a title to a table. It should be directly placed after the opening tag. All of our users are listed below... All of our users are listed below Header 1 Header 2 Header 3......... RRR