Web Design Lecture Notes PDF

University of Human Development College of Science and Technology Information Technology & Computer Science Departments Web Design Semester 3 Lecture.1 :...

University of Human Development College of Science and Technology Information Technology & Computer Science Departments Web Design Semester 3 Lecture.1 : Introduction Lecturer: Karwan Mohammad 19.9.2023 [email protected] 1  Table Of Content What is The Internet Web History Client and Server Web Protocols Web Browser Web Server What is the HTML, CSS, and Java Script What is the PHP and MySQL 2  What is The Internet ✓ Networking infrastructure that allows hardware devices to physically connect to one another. o Servers, Desktop PCs, Mobile devices etc. o Based on common standards – notably the TCP/IP protocol suite ✓ Protocols specify how the transactions are carried out. o How communication is initiated and maintained o Type, size and structure of the data sent/received ✓ Supporting standard application services (DNS, e-mail, web) ✓ Each Internet host has an IP address ex. 137.195.13.48 ✓ Some Internet hosts have a domain name e.g. www.uhd.edu.iq ✓ Software clients (and servers) allow users and devices to access and use internet services. 3 What is The Internet cont. 4 Web History 5  Web 1.0 (The Static Web) ✓Time Period: 1990 to early 2000. ✓Characteristics: Primarily static websites with simple HTML pages. Limited user interactivity and engagement. Informational content with one-way communication from websites to users. Basic graphics, minimal multimedia elements. ✓Examples: Early websites like personal homepages, online brochures, and informational websites. ✓The primary technologies of web 1.0: HTML (HyperText Markup Language) HTTP (HyperText Transfer Protocol) URL (Uniform Resource Locator) 6  Web 2.0 (The Social Web) ✓Time Period: Mid-2010 to late 20020. ✓Characteristics: Interactive and user-centered design. Rich user experiences with AJAX (Asynchronous JavaScript and XML) and dynamic content. Social networking, user-generated content, and collaboration. Web-based applications (web apps) that mimic desktop software. Enhanced multimedia, including video and streaming. ✓Examples: Social media platforms like Facebook and YouTube, blogs, wikis, and web- based productivity tools like Google Docs. ✓Web 2.0 Core Layers of Innovation Mobile Social Cloud 7  Web 3.0 (The Semantic Web) ✓Time Period: Emerging concept in 2020, ongoing development. Characteristics (anticipated or under development): Focus on machine-readable data and linked data. Advanced artificial intelligence (AI) and natural language processing (NLP) for understanding and organizing web content. Enhanced personalization, context-aware services, and recommendation systems. Decentralized and blockchain-based technologies. Examples: The full realization of Web 3.0 is still evolving, but elements include the use of semantic technologies like AI-driven chatbots, and decentralized applications (DApps) built on blockchain platforms like Ethereum. 8  Web 3.0 (The Semantic Web) cont. ✓Layers of Web 3.0 Edge computing Decentralization Artificial intelligence & machine learning Blockchain 9  Client and Server ✓Most common internet services based on a client/server model using appropriate communication protocol(s) ✓Usually local software clients access centralized remote servers – Email via an Outlook client accessing an ISP's mail server – Web pages via a Firefox web client accessing an Apache web server 10  Protocols to Build Services ⚫Clients and servers typically use a combination (stack) of protocols to provide specific services – Web access – Email – File transfer – Peer-to-peer data exchange – Chat/instant messaging – Shell/console access to computers ⚫Most common protocols in use today are those associated with web and email services – HTTP/HTTPS – SMTP/ IMAP/ POP etc. 11  Common Internet Protocols Protocol Notes HTTP HyperText Transfer Protocol Core protocol for web transactions SSL Secure Sockets Layer Data encryption HTTPS Secure HTTP A combination of HTTP and SSL SMTP Simple Mail Transfer Protocol Used in combination to provide most email POP Post Office Protocol services IMAP Internet Message Access Protocol FTP File Transfer Protocol Used to exchange files between computers SSH and Secure SHell and Secure/SSH FTP Encrypted access to remote computers plus SFTP extension for encrypted file transfer BitTorrent …er… BitTorrent Protocol for peer-to-peer data access and exchange 12  TCP/IP is The Heart of the Internet ⚫TCP (Transmission Control Protocol ) – Handles direct connection on computer between client/server software and network interface(s) – Breaks outgoing messages from application into packets to send via IP – Assembles incoming packets into messages to pass back to application ⚫ Packets have two parts: – Header (addressing/sequencing information and metadata) – Body (actual data payload) ⚫ IP (Internet Protocol ) – Handles delivery of packets to/from any device with an IP address – A unique numeric identifier for a device on the internet e.g. 128.240.233.249 13  Web Browser ✓ A web browser (commonly referred to as a browser) is a software application for retrieving, presenting and traversing information resources on the world wide web. 14  Web Server ✓ A Web server is a computer system that hosts websites. ✓ It runs Web server software, such as Apache or Microsoft IIS, which provides access to hosted webpages over the Internet. 15 How do web page is work? 16 How do web page is work? cont. 17 How do web page is work? cont. 18 How do web page is work? cont. 1919 How do web page is work? cont. 20 How do web page is work? cont. 21 How do web page is work? cont. 22 How do web page is work? cont. 23 How do web page is work? cont. 24 Growth Of The Web 25  What do I need to know? 1. HTML 2. CSS Bootstrap 3. JavaScript jQuery 4. PHP 5. MySQL 26  What is the HTML ? ✓ HTML stands for HyperText Markup Language. ✓ HTML is a Markup language for creating web pages. ✓ HTML is not a programming language. ✓ A markup language is a set of markup tags. ✓ The markup tags describe how text should be displayed. 27  What is the CSS ? ✓ CSS stands for Cascading Style Sheets. ✓ It is a language that web developers use to style the HTML content on a web page. ✓ If you're interested in modifying colors, font types, font sizes, shadows, images, element positioning, and more, CSS is the tool for the job! 28  What is the JavaScript ? JavaScript is a scripting language. A Scripting language is a lightweight programing language. JavaScript is usually embedded directly into HTML pages. JavaScript is an interpreted language 29  What is the PHP ? ✓It stands for PHP: Hypertext Preprocessor. ✓It is a server side programing language. ✓Using PHP, You can: ❑develop dynamic websites. ❑Have connections with databases. 30  What is the MySQL ? ✓ MySQL is a Relational Database Management System (RDBMS). ✓ MySQL uses Structured Query Language (SQL). ✓ Database Management System (DBMS) is system software for creating and managing databases. ✓ SQL is the standard language for relational database management systems. 31  Static VS Dynamic Website Static Dynamic 1. Written in plain HTML. 1. Written using a server-side scripting language such as PHP, ASP, JSP. 2. Difficult to update and the user need to know HTML. 2. Easy to update and no technical knowledge is required. 3. Very difficult to scale 3. Easy to scale 32 Programming Language and Script Language 33 Tool & Editor 34 Any Questions… 35  University of Human Development College of Science and Technology Information Technology & Computer Science Departments Web Design 2023 – 2024 Semester 3 Lecture.2 : HTML – Part.1 Basic HTML Elements Lecturer: Karwan Mohammed 19.9.2023 [email protected] 1  Table Of Content Overview of designing a webpage Page formatting Text Items and objects List in HTML 2  Overview of Designing a Webpage Design Considerations and Planning Basic Tags and Document Structure ✓HTML Tags … ✓Head Tags … ✓Title Tags … ✓Body Tags … Metadata Saving an HTML page 3  Web Design 4  Design Considerations and Planning Before you sit down to design your first webpage, you should have an idea of what you want your end result to look like. draw a rough sketch of your page. Layout where you want to place your pictures, text and other elements Your draft will be your blueprint as you develop your page. you have to decide how to organize the pages so that information is easily accessible to people as they view your site. 5  Design Considerations and Planning cont. As you are getting started, visit a few of your favorite websites. Take note of things you like and don’t like. How is the information laid out? Can I easily navigate from one page to another? How could the information be better organized? In addition to layout considerations, this is also a great way to inspire you in design details. What makes the site more user-friendly? Are there creative uses of text or images that are particularly appealing? 6  Design Considerations and Planning cont. ◼ Once you have decided on your content and layout, make a simple flowchart of your site. It will give you a visual map to work from. ◼ Below is an example of a simple website flowchart Home page About us FAQs products Services Contact us Product Services area 1 area 1 Product Services 7 area 2 area 2  What is new for HTML5 We will use HTML5 throughout this course. There are many changes to HTML5 that make it much easier to work with. The semantics and structure are clearer and more straight forward than previous versions of HTML. New Elements have been added and redundant Tags have been removed. The insertion of media has been streamlined and it has been updated to work across a multitude of platforms, i.e. home computers, tablets and mobile phones. 8  What is new for HTML5 Deprecated tags: The following tags have been deprecated in HTML5: 9  HTML5 Structure Elements 10  HTML5 Structure Elements cont. 11  HTML Anatomy 12 Note: some HTML elements have opening tags only  HTML Anatomy cont. Attributes provide even more information about an element's content. They live directly inside of the opening tag of an element. Attributes are made up of the following two parts: 1. The name of the attribute. 2. The value of the attribute. Example: your paragraph text. 13  Basic Tags and Document Structure !DOCTYPE: To let web browsers know that HTML language has been used. At the top of your coding write If you don’t do this, your HTML code will likely still work. However, it is risky… Because it might not work for future standards This tag defines the document type and HTML version. HTML 4 DOCTYPE () 14  Basic Tags and Document Structure cont. To begin adding HTML structure and content, we must first add opening and closing tags, like so: Anything between and will be considered HTML code. Without these tags, it's possible that browsers could incorrectly interpret your HTML code and present HTML content in unexpected ways. 15  Basic Tags and Document Structure cont. Head: it gives the browser some information about the page. 16  Basic Tags and Document Structure cont. The head-element should include a title-element (typically appears in the (tab) title bar of a browser) The head-element should also include meta data such as the author of the page, a description of its content, keywords The head-element can also include Cascading Style Sheet (CSS) denitions or links to external style sheets The head-element can also include JavaScript code or links to les containing such code 17  Basic Tags and Document Structure cont. Page Titles: it is used to set the title of your page and it is put inside head elements. 18  Basic Tags and Document Structure cont. ✓ Body: All contents should be put inside body elements. 19  Basic Tags and Document Structure cont. The body-element contains the content that is to be displayed by a web browser including: ✓ Articles, sections, footers, and navs ✓ Headings ✓ Paragraphs ✓ Lists and tables ✓ Images The body-element may contain internal CSS blocks. The body-element may contain JavaScript code that reacts to events in the web browser and can dynamically change the content. 20  Metadata There are two reasons to use meta tags: ✓Search Engine Optimization (SEO): ✓Browser Behavior Metadata is used to identify information about your webpage. It is used by search engines such as Google and Yahoo to help determine where your pages will be ranked in search results. While there are many other factors search engines use to determine ranks, your metadata is an important first step in optimizing your pages. Metadata is placed between the … tags. 21  Metadata cont. 22  Metadata cont. 23  Page Formatting ✓Adding a New Paragraph ✓Adding a Line Break ✓Inserting Blank Space ✓Preformatted Text ✓Changing a Page’s Background Color ✓Div Element 24  Page Formatting cont. Paragraphs: to add content of a text use paragraph element 25  Page Formatting cont. Line Breaks: By default, browsers ignore many formatting keystrokes that we take for granted. Examples include the “Enter” and “Tab” keys and multiple uses of the spacebar If you are interested in modifying the spacing in the browser, you can use HTML's line break element:. 26  Page Formatting cont. Preformatted Text: If you want to avoid some of the repetitive coding that comes with multiple spacing in your document, you can use the preformatted tags …. The … tags allow you to maintain the integrity of the spacing and formatting of your text so that browsers will display it as you have typed it. 27  Page Formatting cont. Changing a Page’s Background Color: HTML coding uses hexadecimal values to assign colors. Hexadecimal values are assigned by typing a number sign (#) followed by a six character value. For very basic colors, you can also replace the six character value with the color name (red, yellow, green, etc.) By default, the background of your pages will be white. Use caution when changing the background color of your page, as it can sometimes make it harder for users to read your text 28  Page Formatting cont. Div Element: The div element will: 1. Keep HTML code easy to read. 2. Group elements that belong together. You can think of the div as a box, or container, that groups elements that belong together. It can also be used in conjunction with CSS, for styling purposes, on large blocks or sections of content. 29  Text Items and Objects ✓Headings ✓Comments ✓Block Quotes ✓Horizontal Lines ✓Special Characters 30  Text Items and Objects cont. Headings In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content. main headings subheadings subheadings subheadings subheadings 31  Text Items and Objects cont. Comments: use comments to help you and others understand your code later. To disable any code with out deleting it. 32  Text Items and Objects cont. Block Quotes: typically used for quoted text from other sources 33  Text Items and Objects cont. Horizontal Lines: You can insert a solid horizontal line into your webpage to break up information or add visual interest 34  Text Items and Objects cont. Special Characters: There are times when it becomes necessary to display characters and symbols that are not available on a standard keyboard such as © or that may have special meaning in HTML (,&, etc). To accomplish this, HTML uses the Special Character Entity tag. The tag takes the format of an ampersand (&), followed by the code and a semicolon. 35  Special Characters Special Description Code Character Acute Accent ´ &#180; Ampersand & &#38; Cent Sign ¢ &#162; Copyright © &#169; Dagger † &#8224; Degree Sign ° &#186; Division Sign ÷ &#247; Euro € &#8363; Fraction (one-half) ½ &#189; Fraction (one-fourth) ¼ &#188; Fraction (three-fourths) ¾ &#190; Greater-than sign > &#62; Left-angle quote « &#171; Less-than sign < &#60; Multiply sign x &#215; Plus or minus sign ± &#177; Quotation Mark (left) “ &#8220; Quotation Mark (right) ” &#8221; Registered Trademark ® &#174; Right-angel quote » &#187; Superscript one ¹ &#185; 36 Trademark ™ &#8482;  Creating Lists ✓ Numbered (Ordered) Lists ✓Bulleted (Unordered) Lists ✓Nested Lists ✓Definition Lists 37  Creating Lists cont. Numbered (Ordered) Lists: When you create a numbered list, you must use two different tags. First, you place the … tags around the text you want to become a numbered list. Second, you place the … tags around each line of the list. You have five choices to create: 1. Upper-case letters (A,B,C) 2. lower-case letters (a,b,c) 3. upper-case Roman numerals (I,II,III) 4. lower-case Roman numerals (I,ii,iii) 5. regular numbers (1,2,3) which is the default. 38  Creating Lists cont. Attribute types of numbered (ordered) lists Attributes: type=“1” (Default) List sequence uses 1,2,3, etc. type=“A” (Upper case alphabet) List sequence uses A,B,C, etc. type=“a” (Lower case alphabet) List sequence uses a,b,c, etc. type=“I” (Upper case Roman numerals) List sequence uses I,II,III, etc. type=“i” (Lower case Roman numerals) List sequence uses I,ii,iii, etc. start=“?” (Starting value) Where “?” is the starting value. 39  Creating Lists cont. Bulleted (Unordered) Lists: Attribute types of numbered (ordered) lists Attributes: style=“list-style-type:disc” List sequence uses filled circle style=“list-style-type:circle” ○ List sequence uses hollow circle style=“list-style-type:square” List sequence uses filled square 40  Creating Lists cont. Nested Lists: ✓A nested list is simply a numbered or bulleted list that is contained within another list ✓This can come in handy when you wish to display items at different levels within a list hierarchy 41  Any Question? 42  University of Human Development College of Science and Technology Information Technology & Computer Science Departments Web Design 2024 – 2025 Semester 3 Lecture.3 : HTML – Part.2 Basic HTML Elements Lecturer: Karwan Mohammed 17.10.2023 [email protected] 1  Table Of Content Text Editing Links Image 2  Text Editing Bold Italic Superscript Subscript Abbreviation Deletion 3  Text Editing Cont. Bold: By enclosing words in the and tags we can make characters appear bold. Note: the tag have the same effect. 4  Text Editing Cont. Italic: By enclosing words in the and tags we can make characters appear italic. Note: the tag have the same effect. 5  Text Editing Cont. Subscript: The element is used to contain characters that should be subscript. It is commonly used with foot notes or chemical formulas such as H20. 6  Text Editing Cont. Abbreviations: The and element is used for abbreviation or an acronym. 7  Links What are Links? Links are short for hyperlinks Allow users to navigate from one topic or page to the next. Links most often take the form of underlined text, but you can also turn images into links. You can link users to other pages on your site, other pages on the Web, to an e-mail address and even to other types of documents (such as Microsoft Word, or PDF). 8  Links cont. Text Links: You can add links to a web page by adding 1. An anchor element 2. href attribute. When you link to a different website, the value of the href attribute will be the full web address for the site, which is known as an absolute URL. 9  Links cont. Linking to Other Pages on the Same Site: When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL. If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file. 10  Links cont. Directory Structure : On larger websites it's a good idea to organize your code by placing the pages for each different section of the site into a new folder. Folders on a website are sometimes referred to as directories. Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files. 11  Links cont. To link to music reviews from the music homepage: Same Folder Reviews To link to music listings from the homepage: Child Folder listings To link to DVD reviews from the homepage: Grandchild Reviews To link to the homepage from the music reviews: Parent Folder Home Grand Parent To link to the homepage from the DVD reviews: Folder Home 12  Links cont. Image Links: This is accomplished in the same manner as text links, with the image coding replacing the text that gets turned into a link. 13  Links cont. Opening a Page in a New Window or Tab: By default, when you link to another page, the new page opens in the existing browser window. There may be times when you wish to open the page in a new browser window or tab. A tab is considered a “new window” in the same browser. 14  Links cont. Linking to an Area on the Same Page (Bookmarks): Sometimes, you may want to create a link that takes the user to another area on the same page. Also called bookmarks. these links are helpful for especially long pages, or when you want to make navigation easy on the page and organize information for the user. 15  Links cont. 16  Links cont. Linking to an E-mail Address: You can create links on your page to e-mail addresses. When the link is clicked, the user’s default e-mail editor will open with the e-mail address you specified in the “To” address area. 17  Links cont. Button as a Link o use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events