Information Technology Essentials Lecture 12 PDF

Information Technology Essentials — Lecture 12 Dr. Karim Lounis Fall 2024 Dr. Karim Lounis Information Technology Essentials Fall 2024 1 / 66  Web Technology (Part 2) Dr. Karim Lounis Information Technology Essentials...

Information Technology Essentials — Lecture 12 Dr. Karim Lounis Fall 2024 Dr. Karim Lounis Information Technology Essentials Fall 2024 1 / 66  Web Technology (Part 2) Dr. Karim Lounis Information Technology Essentials Fall 2024 2 / 66  Web Technology HTML HyperText Markup Language ? Dr. Karim Lounis Information Technology Essentials Fall 2024 3 / 66  Web Technology HTML HyperText Markup Language (HTML) Definition HTML. Is a standard declarative interpreted programming language used to write web documents (webpages) displayed by a web browser (interpreter). A document containing HTML source code has extension *.html or *.htm. Dr. Karim Lounis Information Technology Essentials Fall 2024 4 / 66  Web Technology HTML HyperText Markup Language (HTML) The HTML language has the following characteristics (some of them): HTML is a language to write static webpages or websites (i.e., fixed content, limited interactivity, quick loading, ease of hosting, etc). HTML is not a turing-complete language. I.e., cannot perform any computation that can be described algorithmically. HTML is often complemented by other technologies like CSS (Cas- cading Style Sheets) for styling and layout, and JavaScript for adding interactivity and dynamic behavior to web pages. HTML is interpreted and compiled by a web-browser, e.g., Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, etc. HTML had several verisons, the current version is HTML 5 (in 2014). Maintained by W3C, and then by WHATWG, and now both. Dr. Karim Lounis Information Technology Essentials Fall 2024 5 / 66  Web Technology HTML HyperText Markup Language (HTML) The HTML language has the following characteristics (some of them): HTML is a language to write static webpages or websites (i.e., fixed content, limited interactivity, quick loading, ease of hosting, etc). HTML is not a turing-complete language. I.e., cannot perform any computation that can be described algorithmically. HTML is often complemented by other technologies like CSS (Cas- cading Style Sheets) for styling and layout, and JavaScript for adding interactivity and dynamic behavior to web pages. HTML is interpreted and compiled by a web-browser, e.g., Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, etc. HTML had several verisons, the current version is HTML 5 (in 2014). Maintained by W3C, and then by WHATWG, and now both. Dr. Karim Lounis Information Technology Essentials Fall 2024 6 / 66  Web Technology HTML Bascis HTML Essentials Well, HTML is a language, a webpage is a document written mostely in HTML, and a website is a collection of webpages that are logically connected using hyperlinks... but I do make a website using HTML? ☞ This is what you should do [Legacy Way]: 1 Create a folder in your computer (put it whereever you want). 2 Move into the folder and open notepad or any text editor. 3 Type in some HTML code, save the file with extension (html or htm), then close it. You’ve made a webpage. 4 Repeate Step 2 till you finish creating all your webpages. The code you inserted would contain some HTML hyperlinks connecting the various pages you created (it does not make sense if you do not use hyperlinks). 5 Name the main webpage as index.html (index.html). 6 Use your web-browser and open the index.html page. 7 Congrats! you can surf over your website. Dr. Karim Lounis Information Technology Essentials Fall 2024 7 / 66  Web Technology HTML Bascis HTML Essentials Well, HTML is a language, a webpage is a document written mostely in HTML, and a website is a collection of webpages that are logically connected using hyperlinks... but I do make a website using HTML? ☞ This is what you should do [Modern Way]: 1 Use an IDE, e.g., Visual Studio Code (VS Code). 2 Add Live-Server extension to the IDE. 3 Create a folder for your project. 4 Create an empty file inside the created folder. 5 Use VS code’s text editor to write HTML code. 6 Type in some HTML code, save the file, then run the live server. 7 Your default web-browser will pop-up displaying your webpage. 8 Repeate Step 4 till you finish creating all your webpages. The code you inserted would contain some HTML hyperlinks connecting the various pages you created (it does not make sense if you do not use hyperlinks). 9 Use your web-browser and open the index.html page. 10 Congrats! you can surf over your website. Dr. Karim Lounis Information Technology Essentials Fall 2024 8 / 66  Web Technology HTML Bascis HTML Structure and Elements What do we write inside our HTML files? Dr. Karim Lounis Information Technology Essentials Fall 2024 9 / 66  Web Technology HTML Bascis HTML Structure and Elements In order for your HTML file to be compliant with basic HTML standards, your document should start with a “DOCTYPE declaration” (statement): It let’s the visitor’s web-browser know that this is a, HTML 5 document. Following this declaration, the file will start defining how the brwoser will start structuring and formating the content of the webpage. To that end, we use two HTML tags (an opening tag and a closing tag):...content... You entire HTML code will be placed within these two HTML tags. Dr. Karim Lounis Information Technology Essentials Fall 2024 10 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 11 / 66  Web Technology HTML Bascis HTML Structure and Elements (Head and Body) Within the two HTML tags, you need to define two major sections: HEAD and BODY. Using the opening and closing tags for head section, we can add information related to the webpage. E.g., the title of your webpage....head content... To add a title, you need to use the title-tags. The title will appear on the web-browser’s tab displaying your webpage....my title... Next is the body section, where your main HTML code (what you want to display to the user — visitor of the webpage) will be placed....content... Dr. Karim Lounis Information Technology Essentials Fall 2024 12 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 13 / 66  Web Technology HTML Bascis HTML Structure and Elements (Header Formatting) In the content of the BODY, you can add whatever content you want: 1 You can put header tags, which allows you to write large titles:...title... you will get title You can have smaller header text:...title... you get title...title... you get title...title... you get title...title... you get title...title... you get title Dr. Karim Lounis Information Technology Essentials Fall 2024 14 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 15 / 66  Web Technology HTML Bascis HTML Structure and Elements (Some Formatting) In the content of the BODY, you can add whatever content you want: 2 You can create paragraph elements using p-tags:...paragraph... 3 You can add break line tags to break lines (don’t need a closing tag): 4 You can add a horizontal rule (line) using the HR-tags (don’t need a closing tag). Interesting if you want to separate your different sections: 5 You can comments (not interpreted — not displayed by your browser) using comment-tags: Dr. Karim Lounis Information Technology Essentials Fall 2024 16 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 17 / 66  Web Technology HTML Bascis HTML Structure and Elements (Hyperlinks) In the content of the BODY, you can add whatever content you want: 6 You can turn titles, words, paragraphs, boxes, images,..., into hyper- links using a-tags, which have an attribute “href” to specify the URL of another webpage (if clicked, the URL’s webpage willl be displayed):...hypertext... ☞ You can open the new page on a new tab by specifying the attribute target= blank (the default is target= self). ☞ The other webpage should be located on the same folder as the current webpage. Otherwise, the complete path should be specified. ☞ You could point to the same page using anchors: E.g., href="♯bottom". ☞ You can turn a text into a mailing link to send an email: Email me Dr. Karim Lounis Information Technology Essentials Fall 2024 18 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 19 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 20 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 21 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 22 / 66  Web Technology HTML Bascis HTML Structure and Elements (Images) In the content of the BODY, you can add whatever content you want: 7 You can insert images in your html file using the img-tag (a self-closing tag). Use the src attribute to specify the path to your image: ☞ You can adjust the scale of the image by assigning values to the height and width attributes, in pixels, e.g.,: ☞ You can add alternative text to the image to accomodate visitor using screen-readers. You can do that using the alt attribute. Dr. Karim Lounis Information Technology Essentials Fall 2024 23 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 24 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 25 / 66  Web Technology HTML Bascis HTML Structure and Elements (Audio) In the content of the BODY, you can add whatever content you want: 8 You can add audio element to your webpage using the audio-tag (a self-closing tag). Use the src attribute to specify the path to your audio file (e.g., mp3, ogg, or wav file): ☞ You can add a control pannel to control your audio using the boolean control attributes (true by default), and make it play automatically. You can also mute it or play it in a loop. E.g.,: ☞ If suspect that a browser may not support audio, then you can set alter- natives (e.g., display text) instead of playing the audio: Alternative text Dr. Karim Lounis Information Technology Essentials Fall 2024 26 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 27 / 66  Web Technology HTML Bascis HTML Structure and Elements (Videos) In the content of the BODY, you can add whatever content you want: 9 You can add video element to your webpage using the video-tag (a self-closing tag). Use the src attribute to specify the path to your video file (e.g., mp4, ogg, or webm file): ☞ You can add a control pannel to control yourvideo using the boolean control attributes (true by default), and make it play automatically. You can also mute it or play it in a loop. E.g.,: ☞ You can adjust the scale of the video by assigning values to the height and width attributes, in pixels, e.g.,: Dr. Karim Lounis Information Technology Essentials Fall 2024 28 / 66  Web Technology HTML Bascis HTML Structure and Elements (Videos) In the content of the BODY, you can add whatever content you want: 9 You can add video element to your webpage using the video-tag (a self-closing tag). Use the src attribute to specify the path to your video file (e.g., mp4, ogg, or webm file): ☞ You can adjust the scale of the video by assigning values to the height and width attributes, in pixels, e.g.,: ☞ If suspect that a browser may not support video, then you can set alter- natives (e.g., display text) instead of playing the video: Alternative text Dr. Karim Lounis Information Technology Essentials Fall 2024 29 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 30 / 66  Web Technology HTML Bascis HTML Structure and Elements (Text Formatting) In the content of the BODY, you can add whatever content you want: 10 You can make a text look bold: text this will show text 11 You can make a text look italic: text this will show text 12 You can make a text look big: text this will show text 13 You can make a text look small: text this will show text Dr. Karim Lounis Information Technology Essentials Fall 2024 31 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 32 / 66  Web Technology HTML Bascis HTML Structure and Elements (Text Formatting) In the content of the BODY, you can add whatever content you want: 14 You can create superscripts: a5 this will show a5 15 You can create subscripts: a6 this will show a6 16 You can make a text underlined (inserted): text this will show text 17 You can cross a text (deleted) text this will show text 18 You can cross a text (deleted) text this will show text Dr. Karim Lounis Information Technology Essentials Fall 2024 33 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 34 / 66  Web Technology HTML Bascis HTML Structure and Elements (Lists) In the content of the BODY, you can add whatever content you want: 19 You can create unordered lists (bullet point list): a... z 20 You can can create ordered lists (numbered list): a... z 21 You can can create description lists: termdefinition ☞ You can create nested list out of the above three types of lists. ☞ You can specify the symbole of the lists: type="1|disc|square|a|I". Dr. Karim Lounis Information Technology Essentials Fall 2024 35 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 36 / 66  Web Technology HTML Bascis HTML Structure and Elements (Tables) In the content of the BODY, you can add whatever content you want: 22 You can create tables in HTML using table-tags:... We can define rows using the TR-tags:... Within the TR-tags, we can define headers using the TH-tags:......... Within the TR-tags, we can define columns (data) using the TD-tags:......... We can use the attribute bgcolor="" to assign a color to the rows and to the table’s background (borders). You can center the content using align="center". You can scale the cells using, e.g., width attribute. Dr. Karim Lounis Information Technology Essentials Fall 2024 37 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 38 / 66  Web Technology HTML Bascis HTML Structure and Elements (Colors) In the content of the BODY, you can add whatever content you want: 23 You color the background of your webpage (using CSS properties):............ 24 We can set color for the text:... We can color text and background of a paragraph:... Dr. Karim Lounis Information Technology Essentials Fall 2024 39 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 40 / 66  Web Technology HTML Bascis HTML Structure and Elements (Spans and Divs) In the content of the BODY, you can add whatever content you want: 25 You can change the style of a portion of a text (e.g., a sentence): your text 26 You can change the style of a portion of document: content Dr. Karim Lounis Information Technology Essentials Fall 2024 41 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 42 / 66  Web Technology HTML Bascis HTML Structure and Elements (Metadata) In the content of the BODY, you can add whatever content you want: 27 We can tell a web-browser what our webpage is about, keywords in the webpage, set auto-refresh periode, adjust webpage to user’s device width, specify the encoding (ASCII or UTF-8), using a meta-tag, which expresses metadata (data about data) — good for search engines. This is placed in the head section of your HTML document: Dr. Karim Lounis Information Technology Essentials Fall 2024 43 / 66  Web Technology HTML Bascis HTML Structure and Elements (iFrames) In the content of the BODY, you can add whatever content you want: 28 We can embbed content from another source into your HTML docu- ment (e.g., used for ads): Some website have disabled the use of iframe to embbed their website in other website, e.g., Google.com, usthb.dz, cerist.dz,... you can try and see. Dr. Karim Lounis Information Technology Essentials Fall 2024 44 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 45 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 46 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 47 / 66  Web Technology HTML Bascis HTML Structure and Elements (Buttons) In the content of the BODY, you can add whatever content you want: 29 We can create button using button-tags: Click here You can have the button disabled: Click here You can color the button disabled: text We can associate a function (e.g., RunThis) to the button so that it is executed when the button is clicked. The code of the function will be written in JavaScript (Not covered in this coure): Click here Dr. Karim Lounis Information Technology Essentials Fall 2024 48 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 49 / 66  Web Technology HTML Bascis HTML Structure and Elements (Forms) In the content of the BODY, you can add whatever content you want: 30 We can use forms using form-tags to send data from a client to a server: Form elements You can have the following form elements: Input elements: The label before the intput element Reset button (reset whatever in the input elements): Submit button (submit the data in the input elements): Dr. Karim Lounis Information Technology Essentials Fall 2024 50 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 51 / 66  Web Technology HTML Bascis HTML Structure and Elements (Forms) In the content of the BODY, you can add whatever content you want: 30 We can use forms using form-tags to send data from a client to a server: Form elements You can have the following form elements: If we want the form to be sent to another page, we would specify the new page as well as the method used to transfer the data: GET method: Form elms POST method: Form elms The GET method is going to append all input element variables to the URL, which is not secure (everything travels in plaintext + limit in URL length). The POST method however, sends data in the body of the HTTP request message (not visible in the URL + no limit in size of data). Dr. Karim Lounis Information Technology Essentials Fall 2024 52 / 66  Web Technology HTML Bascis HTML Structure and Elements (Forms) In the content of the BODY, you can add whatever content you want: 30 We can use forms using form-tags to send data from a client to a server: Form elements You can have the following form elements: Password elements: Password Email elements: Email Telephone elements: Tel: Dr. Karim Lounis Information Technology Essentials Fall 2024 53 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 54 / 66  Web Technology HTML Bascis HTML Structure and Elements (Forms) In the content of the BODY, you can add whatever content you want: 30 We can use forms using form-tags to send data from a client to a server: Form elements You can have the following form elements: Date elements: Date Quantity elements: Quantity Telephone elements: Tel: Dr. Karim Lounis Information Technology Essentials Fall 2024 55 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 56 / 66  Web Technology HTML Bascis HTML Structure and Elements (Forms) In the content of the BODY, you can add whatever content you want: 30 We can use forms using form-tags to send data from a client to a server: Form elements You can have the following form elements: Radio buttons: Mr. Mrs. Ms. Dr. Karim Lounis Information Technology Essentials Fall 2024 57 / 66  Web Technology HTML Bascis HTML Structure and Elements (Forms) In the content of the BODY, you can add whatever content you want: 30 We can use forms using form-tags to send data from a client to a server: Form elements You can have the following form elements: Drop down menu: Rank: Assistant Professor Associate Professor Full Professor Dr. Karim Lounis Information Technology Essentials Fall 2024 58 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 59 / 66  Web Technology HTML Bascis HTML Structure and Elements (Forms) In the content of the BODY, you can add whatever content you want: 30 We can use forms using form-tags to send data from a client to a server: Form elements You can have the following form elements: Checkbox: Subscribe: Dr. Karim Lounis Information Technology Essentials Fall 2024 60 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 61 / 66  Web Technology HTML Bascis HTML Structure and Elements (Frames) The main page can be devided into multiple frames: 31 We use the frameset-tag to divide a page into rows or into columns: Given a frameset, we can define the pages that will appear on each frame using the frame-tag (these frames should be declared witin the framesets): The use of frames and the frameset element has been deprecated in HTML5, and it’s not recommended to use them in modern web development. Dr. Karim Lounis Information Technology Essentials Fall 2024 62 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 63 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 64 / 66  Web Technology HTML Bascis Dr. Karim Lounis Information Technology Essentials Fall 2024 65 / 66  End of Presentation End. Dr. Karim Lounis Information Technology Essentials Fall 2024 66 / 66