Reviewer Web Design.pdf

Reviewer Web Design Lesson 1: Internet Essentials Two basic requirements to connect on web: 1. Internet 2. Browser Internet - is a global system of INTERCONNECTED NETWORKS that use standardized NETWORK PROTOCOLS to connect devices and networks worldwide. - Interconnected Networks -...

Reviewer Web Design Lesson 1: Internet Essentials Two basic requirements to connect on web: 1. Internet 2. Browser Internet - is a global system of INTERCONNECTED NETWORKS that use standardized NETWORK PROTOCOLS to connect devices and networks worldwide. - Interconnected Networks - is a vast NETWORK OF NETWORK that allows computers and other digital devices to interconnect - intentionally designed to be DECENTRALIZED. Browser - It provides a way to look at and interact with all the information on the World Wide Web. Key Aspects: INTERCONNECTED NETWORKS - A platform for sharing information that provides a unique, global, diverse, and current information resource. NETWORK PROTOCOLS - To enable communication and data exchange between devices, the internet relies on a set of standardized communication protocols which is the Transmission Control Protocol (TCP) / Internet Protocol (IP). NETWORK OF NETWORK - It is multiple entity of network that connects millions of private, public, academic, business, and government networks worldwide. DECENTRALIZED - refers to the distribution of control, authority, and infrastructure across a wide range of independent entities Major Components of Internet 1. Web Server - As a software, it uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests made over the World Wide Web (WWW). - As hardware, it is a computer that holds web server software and other files related to a website and it must be connected to the internet to allows data to be exchanged with other connected devices. 2. Web Browser - a software application that retrieves the necessary content from a web server (WWW) and then displays the page on the screen. Types of Internet Service 1. Dial-up - Established between your computer and the ISP server using a modem. 2. Broadband - It refers to high-speed internet access that is faster than traditional dial-up access that is provided through either cable or telephone composition. 3. DSL - Digital Subscriber Line is a form of broadband communication that provides an internet connection through the telephone line(network). 4. Cable - It is a form of broadband access cable modem that can provide extremely fast access to the internet. 5. Satellite - It accesses the internet via a satellite that is in Earth’s orbit. 6. ISDN - Integrated Service Digital Network is a circuit-switched telephone network system that transmits both voice and data over a digital line. 7. Cellular - provides wireless Internet access through cell phones. Speeds vary on type of network from 3G to 5G. Factors to consider to choose ISP (Internet Service Provider): 1. Availability 2. Internet Speed 3. Cost Client Computer - A computer that relies on an internet connection to request web pages and access online services from a server. Server Computer - A computer that holds all the information that stores in the web. - HyperText Transfer Protocol Daemon. Daemon - is a program that runs unseen in the background. URL (Uniform Resource Locator) A form of URI (Uniform Resource Identifier) and a standardized naming convention for addressing documents accessible over the Internet. It is known as the address of the webpage. HyperText Transfer Protocol (HTTP) HTTP specification incorporates a whole set of methods that are used to perform the tasks associated with servicing a Web site, including information retrieval, searching, front-end updating, and annotation. The connection between a server and a client program (or agent) is temporary and must be reestablished for every data transfer. Compared to TCP/IP, HTTP can be implemented on top of any other internet protocol. The Internet Tools: - Electronic Email - messages distributed by electronic means from one computer user to one or more recipients via a network. - Chat - refers to the process of communicating, interacting and/or exchanging messages over the Internet - File Transfer Protocol (FTP) - is a standard network protocol used for the transfer of computer files between a client and server on a computer network. - TELNET - a network protocol that allows a user on one computer to log into another computer that is part of the same network. - Wireless Application Protocol - is a technical standard for accessing information over a mobile wireless network. A WAP browser is a web browser for mobile devices such as mobile phones that uses the protocol. - Internet Archived Listing (ARCHIE) – a system that allows you to rapidly locate various public domain programs stored on hundreds of sites across the net. - Internet Gopher – provides a distributed delivery system around which campus-wide information system can readily be constructed. It facilitates access to other gopher and information server throughout the world. - Wide Area Network Services (WAIS) - is a client–server text searching system that uses the ANSI Standard Z39. 50 Information Retrieval Service Definition and Protocol Specifications for Library Applications" (Z39. 50:1988) to search index databases on remote computers. - Web programming - refers to the writing, markup and coding involved in Web development, which includes Web content, Web client and server scripting and network security. - Web design - is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. Two General Types of Internet Programming Languages - 1. Server-Side programming language - programming language where validation of user input happens at the server itself acting on or creating a data stream as it is sent out to the internet client. Examples (XML, Java, PERL, ASP.Net, PHP…) - 2. Client-Side programming language – the program that runs on the client side or end-user workstation. Examples (JavaScript, VBScript,Angular….) Lesson 2: Exploring HTML Web 1.0 - Only allowed us to search for information and read it. - The interaction between the user and the web is very limited. Web 2.0 - It allowed the users to interact with the web page - There is a dynamic content. Features of Web 2.0 1. Folksonomy - allows the users to categorize and classify information (Tagging). Popular social networking sites use tags and freely chosen keywords to activate the feature. 2. Rich User Experience - web content is responsive to user’s input. In social networking sites, when logged on, your account is used to modify what you see in the social media platform. 3. User Participation - Users can place a content of their own by means of comments, reviews, and evaluation. 4. Long Tail - are services that are offered on demand rather than on a one-time purchase. Examples are file- based pricing and time-based pricing. 5. Software as a Service - is a feature that allows you to rent a software rather than installing it in your computer. 6. Mass Participation - diverse information sharing through universal web access. Web 3.0 - Is a movement led by the World Wide Web Consortium (W3C). - It is alike Web 2.0 but it is used to cater individual user. - It allows data to be shared and reused across application, enterprise, and community boundaries. Limitations of Web 3.0 - Compatibility – HTML files and current web browsers could not support Web 3.0 - Security – since the server saves the user’s preference, the user’s security will be questioned. - Vastness – the World Wide Web already contains billions of web pages - Vagueness – The vagueness of words will be questioned due to it being imprecise - Logic – since machines uses logic, there are certain limitations for a computer to be able to predict what the user is referring to at a given time Web - in the context of technology and the internet generally refers to the World Wide Web (WWW), which is a system of interconnected documents and resources that are linked together and accessible via the internet. TWO TYPES OF WEB WEBSITE - A collection of static web page that is primarily informational. Its main purpose is to provide content and information to visitors. WEB APP - A collection interactive web pages that was designed for user engagement and functionality. It offers dynamic, interactive features and allows users to perform specific tasks or transactions. 3 language that is used in creating a Web Page 1. HTML 2. CSS 3. JAVASCRIPT HTML - stands for Hypertext Markup Language, and it is the most widely used language to write/ create Web Pages. Hypertext - refers to the way in which Web pages (HTML documents) are linked together. Markup Language - which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. The most common features in a good HTML editor are: 1. Syntax highlighting 2. Auto-completion 3. Error detection 4. Search and replace 5. FTP integration 6. Code folding HTML Tags & - All HTML documents must start with a type declaration - DOCTYPE declaration defines the document type to be HTML 5. - The HTML document itself begins with and ends with. - The HTML element is a container for the following elements: , , , , , and. - Metadata typically define the document title, character set, styles, scripts, and other meta information.  - The element is a required HTML element used to assign a title to an HTML document. - It is used as the page name of the web page. - The tag defines the document's body. - The element contains all the visible contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The tag defines a paragraph. - Browsers automatically add a single blank line before and after each element - The tag defines a heading 1. - The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size. - The tag defines a division. - s don’t inherently have a visual representation, but they are very useful when we want to apply custom styles to our HTML elements. & - The tag emphasizes text, while the tag highlights important text. - The tag will generally render as italic emphasis. - The will generally render as bold emphasis. - The tag defines a line break. - It is used in modifying the spacing in the browser. & - Ordered list () tag is used to create a list of items in no order. - Unordered lists () are like unordered lists, except that each list item is numbered. - The or list item tag is used to describe an item in a list.  Tag Description Heading (?= 1 for largest to 6 for smallest, example h1) Bold text Italic text Underline Text Strikeout Superscript - Smaller text placed below normal text SAMPLE Subscript - Smaller text placed below normal text SAMPLE Small - Fineprint size text Typewriter Text Pre-formatted Text Text Block Quote Strong - Shown as Bold in most browsers Emphasis - Shown as Italics in most browsers Font tag obsolete, use CSS instead CSS – Cascading Style Sheets HTML attributes - provide additional information about HTML elements. - All HTML elements can have attributes. - Attributes are always specified in the start tag. - Attributes usually come in name/value pairs like: name="value" Tag Description size="?" Line Thickness in pixels width="?" Line Width in pixels width="??%" Line Width as a percentage color="#??????" Line color align="?" Horizontal Alignment: left, center, right (*) background="url" Background Image bgcolor="#??????" Background Color text="#??????" Document Text Color link="#??????" Link Color vlink="#??????" Visited Link Color alink="#??????" Active Link Color bgproperties="fixed" Background Properties - "Fixed" = non-scrolling watermark leftmargin="?" Side Margin Size in Pixels (Internet Explorer) topmargin="?" Top Margin Size in Pixels (Internet Explorer) Lesson 3: HTML List and Tables HTML List Tags Tag Description Defines an unordered list Defines an ordered list Defines a list item Defines a description list Defines a term in a description list Describes the term in a description list The TYPE Attribute for UL (Unordered List) Value Description disc Sets the list item marker to a bullet (default) circle o Sets the list item marker to a circle square ▪ Sets the list item marker to a square none The list items will not be marked The TYPE Attribute for OL (Ordered List) Value Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers HTML Tags Description List - The tag defines the description list, the tag defines the term (name). - The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. - The HTML tables are created using the tag in which the tag is used to create table rows and tag is used to create data cells. The elements under are regular and left aligned by default HTML Table Tags Tag Description Defines a table Defines a header cell in a table Defines a row in a table Defines a cell in a table Defines a table caption Specifies a group of one or more columns in a table for formatting Specifies column properties for each column within a element Groups the header content in a table Groups the body content in a table Groups the footer content in a table The Attribute for TABLE Tag Description border="?" Thickness of outside border bordercolor="#??????" Border Color cellspacing="?" Space between cells (pixels) cellpadding="?" Space between cell wall and content align="??" Horizontal Alignment: left, center, right bgcolor="#??????" Background Colour width="??" Table Width (pixels or %) height="??" Table Height (pixels or %) The Attribute for Tag Description border="?" Thickness of outside border bordercolor="#??????" Border Color cellspacing="?" Space between cells (pixels) cellpadding="?" Space between cell wall and content align="??" Horizontal Alignment: left, center, right bgcolor="#??????" Background Colour width="??" Table Width (pixels or %) height="??" Table Height (pixels or %) bgcolor="#??????" Background Color align="??" Horizontal Alignment: left, center, right valign="??" Vertical Alignment: top, middle, bottom nowrap Force no line breaks in a particular cell Table Heading - Table heading can be defined using tag - This tag will be put to replace tag, which is used to represent actual data cell. - Headings, which are defined in tag are centered and bold by default. Cellpadding Attributes - defines space between table cells Cellspacing Attributes - represents the distance between cell borders and the content within a cell. Tables Backgrounds bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell Three elements for separating the head, body, and foot of a table 1. - to create a separate table header. 2. - to indicate the main body of the table. 3. - to create a separate table footer. Lesson 4: HTML Link, Medias & Form HTML Tags Anchor The / anchor tag defines the link. This tag is called anchor tag. Anything between the opening tag and the closing tag becomes part of the link. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red  Value Description blank Opens the linked document in a new window or tab. self Opens the linked document in the same frame. parent Opens the linked document in the parent frame. top Opens the linked document in the full body of the window. targetframe Opens the linked document in a named targetframe. - The tag defines the image. - The source file (src), alternative text (alt), and size (width and height) are provided as attributes. HTML Media - Web pages often contain multimedia elements of different types and formats. - Multimedia elements (like audio or video) are stored in media files. - Multimedia files have formats and different extensions like:.wav,.mp3,.mp4,.mpg,.wmv, and.avi. - The HTML element is used to show a video on a web page. - The controls attribute adds video controls, like play, pause, and volume. - It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. - The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. - The text between the and tags will only be displayed in browsers that do not support the element. - The HTML element is used to play an audio file on a web page. - The controls attribute adds audio controls, like play, pause, and volume. - The element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. - The text between the and tags will only be displayed in browsers that do not support the element. Forms - HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, contact number, age, among other things. In short, an HTML form is used to collect user input.  - A form will take input from the site visitor and then will post it to a back-end application such as ASP.Net, Java Servlet, CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. Form Controls 1. Text Input Controls 2. Checkboxes Controls 3. Radio Box Controls 4. Select Box Controls 5. File Select boxes 6. Hidden Controls 7. Clickable Buttons 8. Submit and Reset Button Tag Description Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a label for an element Groups related elements in a form Defines a caption for a element Defines a drop-down list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines a clickable button Specifies a list of pre-defined options for input controls Defines the result of a calculation Text Input Controls 1. Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML tag. 2. Password input controls - This is also a single-line text input, but it masks the character as soon as a user enters it. They are also created using HTMl tag. 3. Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML tag. Input Attributes Atrribute Description type Indicates the type of input control and for password input control it will be set to password. and for text input control it will be set to text name Used to give a name to the control which is sent to the server to be recognized and get the value.  value This can be used to provide an initial value inside the control. size Allows to specify the width of the text-input control in terms of characters. maxlength Allows to specify the maximum number of characters a user can enter into the text box. Multiple-Line Text Input Controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML tag. Atrribute Description name Used to give a name to the control which is sent to the server to be recognized and get the value. rows Indicates the number of rows of text area box. cols Indicates the number of columns of text area box Checkbox Control Checkboxes - are used when more than one option is required to be selected. They are also created using HTML tag but type attribute is set to checkbox. Atrribute Description Type Indicates the type of input control and for checkbox input control it will be set to checkbox. name Used to give a name to the control which is sent to the server to be recognized and get the value. value The value that will be used if the checkbox is selected. checked Set to checked if you want to select it by default. Radio Button Control Radio buttons - are used when out of many options, just one option is required to be selected. They are also created using HTML tag but type attribute is set to radio. Atrribute Description type Indicates the type of input control and for checkbox input control it will be set to radio. name Used to give a name to the control which is sent to the server to be recognized and get the value. value The value that will be used if the radio box is selected. checked Set to checked if you want to select it by default. Select Box Control Select box - also called drop down box which provides option to list down various options in the form of drop-down list, from where a user can select one or more options. Atrribute Description Name Used to give a name to the control which is sent to the server to be recognized and get the value. size This can be used to present a scrolling list box. multiple If set to "multiple" then allows a user to select multiple items from the menu. Option - Following is the list of important attributes of tag for Select Box Control Atrribute Description value The value that will be used if an option in the select box box is selected. selected Specifies that this option should be the initially selected value when the page loads. label An alternative way of labeling options File Upload Box - If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the element but type attribute is set to file. Atrribute Description name Used to give a name to the control which is sent to the server to be recognized and get the value. accept Specifies the types of files that the server accepts. Button Controls - There are various ways in HTML to create clickable buttons. You can also create a clickable button using tag by setting its type attribute to button. Hidden Control - Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page.