Introduction to Web Development PDF

INTRODUCTION TO WEB DEVELOPMENT ACINFOTE – INTRODUCTION TO INFORMATION TECHNOLOGY CONTENT Basic component of website HTML, CSS and Java Script Website Structure Basic HTML tags BASIC COMPONENT OF THE WEBSITE HTML Website JavaSc...

INTRODUCTION TO WEB DEVELOPMENT ACINFOTE – INTRODUCTION TO INFORMATION TECHNOLOGY CONTENT Basic component of website HTML, CSS and Java Script Website Structure Basic HTML tags BASIC COMPONENT OF THE WEBSITE HTML Website JavaScript CSS HTML (HYPERTEXT MARKUP LANGUAGE):  The backbone of a website. MyWebsite  Defines the structure and content of a webpage.  Use tags to mark up elements like headings, paragraphs, images, links, etc. Welcome to My Website This is a paragraph. CSS (CASCADING STYLE SHEETS):  Styles the appearance of HTML body elements. { font-family: Arial, sans-serif;  Controls colors, fonts, layout, and background-color: #f0f0f0;} more. h1  Can be linked externally, embedded within the HTML, or defined inline. { color: blue; text-align: center;} JAVASCRIPT:  Adds interactivity and dynamic behavior to web pages.  document.getElementById("myButto n").addEventListener("click",  Can manipulate HTML and CSS, function() { alert("Button respond to user input, and create clicked!");}); complex web applications. ANALOGY OF THE RELATIONSHIP BETWEEN HTML, CSS, AND JAVASCRIPT WEBSITE STRUCTURE  The website’s structure refers to the hierarchical arrangement and organization of a site’s pages, creating a roadmap that guides users and search engines alike.  The four main website structures are hierarchical, sequential, matrix and database. HIERARCHICAL STRUCTURE HIERARCHICAL STRUCTURE  The hierarchical model is the most common site structure you’ll come across.  Also known as the tree model or website tree structure, the general layout of this basic website structure is a home page, top-level category pages and then the subpages or child pages layering beneath with internal linking contextually connecting all the pages.  A very simple top-down approach starting from the main page, the hierarchical website structure is one you’ll typically find in use on everything from e- commerce websites to portfolios to companies with diverse business units like Disney. SEQUENTIAL STRUCTURE SEQUENTIAL STRUCTURE  A sequential website structure takes users through a site step-by-step, like a guided tour.  Sometimes referred to as a linear structure, a sequential structure moves you along a logical path of actions where each stop leads naturally to the next.  If you’ve taken an online course or survey, you’ve encountered the linear website structure, same goes for the checkout pages to buy a product.  Small businesses with limited content frequently use this layout too because it simplifies decision-making and streamlines the customer journey to a booking or purchase, making it ideal for simpler sites with a clear goal. MATRIX STRUCTURE MATRIX STRUCTURE  Far from a basic site structure, the matrix structure takes the form of a vast network of pages without a predefined journey for users to follow. For that reason, it’s also known as a webbed website structure.  It’s almost (but not quite) a lack of structure, and that’s the point; it makes it easy for users to have the exact experience that suits their needs, total freedom to browse. It’s often used in large sites with interconnected content, allowing users to navigate freely between related pages; think e-commerce sites like Amazon or news websites.  So you’ll still have a main page along with basic parent pages and their child pages but the order in which users find them is largely irrelevant. Thorough internal linking ensures they can find what they’re looking for in as few clicks as possible. DATABASE STRUCTURE DATABASE STRUCTURE  Sometimes called a dynamic website structure, this structure is a highly customizable form of website organization. The database model relies far more on search functionality and user-defined paths for navigation than a set hierarchy or a pre-defined sequence.  It’s particularly useful for websites that house an extensive amount of content or data where any type of fixed structure could be limiting for users.  Online forums, news sites, social media platforms and other sites with a lot of user-generated content or massive e-commerce platforms with a vast array of products and categories are prime users of the database website structure. HTML HYPER TEXT MARKUP LANGUAGE HTML VERSIONS  Since the early days of the web, there have been many versions of HTML:  VersionYear  HTML 1991  HTML+ 1993  HTML 2.0 1995  HTML 3.2 1997  HTML 4.01 1999  XHTML 1.0 2000  HTML5 2012  XHTML5 2013 THE DECLARATION  The declaration helps the browser to display a web page correctly.  There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used. COMMON DECLARATION  HTML5   HTML 4.01   XHTML 1.0  HTML TAGS  HTML markup tags are usually called HTML tags.  HTML tags are keywords (tag names) surrounded by angle brackets like  HTML tags normally come in pairs like and  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, with a slash before the tag name  Start and end tags are also called opening tags and closing tags HTML CODING PRACTICES  Similar to all programming languages, HTML has a set of coding practices designed to simplify the process of creating and editing HTML files and to ensure that Web pages appear correctly in different browser.  HTML browser ignore spaces that exist between the tags in your HTML document WEB TOOLS  Notepad uses basic text formatting in order to make and edit text files. It is the simplest tool for making Web pages.  Browsers are used in order to view Web pages. Internet Explorer and Netscape are the two most popular browsers around. W3C  W3C stands for World Wide Web Consortium, the organization that develops Web standards.  A website is a collection of Web pages. When you start making your own site, the home page (i.e., your main page) must be saved as “index.html” or “default.html” regardless of the contents of the site. Browsers look for the said files first whenever a Web user types a BASIC HTML TAGS BASIC HTML Tag Description Defines the document type Defines an HTML document Contains metadata/information for the document Defines a title for the document Defines the document's body to Defines HTML headings Defines a paragraph Inserts a single line break Insert horizontal rule Defines a comment HTML ELEMENT ELEMENT TAG PURPOSE Title … Indicate title to appear on the title bar on the web page Body … Specifies what appears on the web page; all web page content is inserted within the start Paragraph … Insert a blank line before paragraph text Line Break Insert a line break before the next element (no blank line) HTML ELEMENT  An HTML element is everything from the start tag to the end tag: HTML Document Example:  How many Elements?  Contains 3 HTML elements.  “This is my first paragraph” is called the Element Content This is my first paragraph. EMPTY HTML ELEMENTS:  HTML elements with no content Example are called empty elements. This isa paragraph with  is an empty element line breaks without a closing tag (the tag defines a newline). Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like , is the proper way of closing empty elements in XHTML (and XML). HTML TIP: USE LOWERCASE TAGS  HTML tags are not case sensitive: means the same as. Many web sites use uppercase HTML tags.  We use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 5, and demands lowercase tags in XHTML. HTML HEADINGS  HTML headings are defined with the to tags.  Example: This is a heading This is a heading This is a heading HEADINGS ARE IMPORTANT  Use HTML headings for headings only. Don't use headings to make text BIG or bold.  Search engines use your headings to index the structure and content of your web pages.  Since users may skim your pages by its headings, it is important to use headings to show the document structure. HTML PARAGRAPH  HTML paragraphs are defined with the tag.  Example: This is a paragraph. This is another paragraph. HTML LINES  The tag creates a horizontal line in an HTML page.  The hr element can be used to separate content:  Example: This is a paragraph. This is a paragraph. This is a paragraph. HTML TEXT FORMATTING This text is bold This text is strong This text is italic This text is emphasized This is computer output This is subscript and superscript FORMATTING PROBLEMS Example: HTML Output - Useful Tips  You cannot be sure how HTML will be displayed. Large or small My Bonnie lies over the ocean. screens, and resized windows will create different results. My Bonnie lies over the sea.  With HTML, you cannot change My Bonnie lies over the ocean. the output by adding extra spaces Oh, bring back my Bonnie to me. or extra lines in your HTML code.  The browser will remove extra Note that your browser ignores the spaces and extra lines when the layout in the HTML source code! page is displayed. Any number of lines count as one line, and any number of spaces count as one space HTML COMMENT  You can add comments to your HTML source by using the following syntax: EXAMPLE Sample Title Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 This is Paragraph 1, the quick brown fox jumps over the lazy dog This is Paragraph 2, the quick brown fox jumps over the lazy dog sample text message, hello world LISTS Tag Description Defines an alternative unordered list Defines an unordered list Defines an ordered list Defines a list item Defines a description list Defines a term/name in a description list Defines a description of a term/name in a description list ATTRIBUTES FOR ORDERED AND UNORDERED LIST Ordered List Type Unordered List Type  for Arabic  numerals   or  for Roman numerals  or for Alpha numerals EXAMPLE OF MENU Sample Title Sample Menu 1 Menu one Menu two Menu three EXAMPLE OF ORDERED LIST Sample Title Sample Ordered List Ordered List 1 Ordered List 2 Ordered List 3 EXAMPLE OF UNORDERED LIST Sample Title Sample Unordered List Unordered List 1 Unordered List 2 Unordered List 3 EXAMPLE OF DESCRIPTION LIST Sample Title HTML The backbone of a website.Defines the structure and content of a webpage. Use tags to mark up elements like headings, paragraphs, images, links, etc. HTML TAG  The tag embeds an image in an HTML page.  Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.  The tag has two required attributes:  src - Specifies the path to the image  alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed HTML TAG Sample Title HTML ATTRIBUTES  HTML elements can have attributes  Attributes provide additional information about an element  Attributes are always specified in the start tag  Attributes come in name/value pairs like: name="value“ IMG ATTRIBUTES Attribute Value Description alt text Specifies an alternate text for an image height pixels Specifies the height of an image src URL Specifies the path to the image border Size Define the border width Width Pixels Specifies the width of an image hspace Size Define the horizontal space that separates the image from the text vspace Size Define the vertical space that separates the image from the text ALWAYS QUOTE ATTRIBUTE VALUES  Attribute values should always be enclosed in quotes. Example:  Double style quotes are the most This common, but single style quotes is a link are also allowed. Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson' HTML LINKS  HTML links are defined with the tag.  The most important attribute of the element is the href attribute, which indicates the link's destination.  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  HTML Link Syntax: Link text EXAMPLE  This is a link  This will open the link in the current tab. Note: The link address is specified in the href attribute.  Visit W3Schools.com!  This will open the link in a new tab. WHEN USING TEXT LINKS  Clickable word or phrase  It often appears as underlined text  Color is different from the main text  The browser setting define the colors of text links throughout a web page 3 STATE OF TEXT LINK  Normal - unvisited  Visited - done  Active - currently If you want to change colors of the text links or image link borders to override the browser default, you must enter attributes and value in the tag  Attribute Function link Normal Link Control the color of a normal unvisited link Default color usually is blue vlink Visited link Control the color of a link that has been clicked or visited Default color usually is green or purple alink Active link Controls the color of a link immediately after clicks the link Default color usually is green or red LINKS CAN  Linking to another Web page within the same Web site  Name of Link  Linking to a Web page in another Web site  name of Link  Linking within a Web page  name of Link  TEXT NAME  Linking an E-Mail Link  Name of Link BACKGROUND IMAGE STYLE  style="background-image:url( christmasparty.png);  background-size:50%,50%;  background-position:center;  background-attachment:fixed" HTML TABLE ITE PROF 2 CREATING WEB PAGES WITH TABLES  Table allows you to organize information on a web page using HTML tags  Table are useful when you want to arrange text and image into rows and columns in order to make the information straight forward and clear HTML TABLE TAGS Tag Function Indicate the start and end of a table All table are inserted within these tags Indicate the start and end of table row Row consist of heading and data cells Indicate the start and end of table heading (also called heading cell) Table heading default to bold text and center alignment Indicates the start and end of data cell in a table Data cells default to normal text and left- alignment TABLE TAG ATTRIBUTE FUNCTION Table Attribute Function align Control table alignment (left, center, right) bgcolor Set background color for table border Defines width of the border in pixels cellspacing Define space between cell in pixels cellpadding Define space between cell’s content in and its border in pixels cols Define number of columns width Set table width relative to window width TABLE TAG ATTRIBUTE FUNCTION Table row Attribute Function align Horizontally align row (left, center, right) bgcolor Set background color for row valign Vertical align row(top, middle, bottom)  TABLE TAG ATTRIBUTE FUNCTION Table Heading/ Data Attribute Function align Horizontally align row (left, center, right) bgcolor Set background color for row valign Vertical align row(top, middle, bottom) colspan Set number of columns spanned by a cell rowspan Set number of rows spanned by a cell HTML TABLES  Tables are defined with the tag.  A table is divided into rows with the tag. (tr stands for table row)  A row is divided into data cells with the tag. (td stands for table data)  A row can also be divided into headings with the tag. (th stands for table heading) HTML TABLES  The elements are the data containers in the table.  The elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.  The width of a table can be defined using CSS. EXAMPLE TABLE First Name Last Name Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 EXAMPLE PROGRAM Jill Smith 50 Eve Jackson 94 John Doe 80 REFERENCES  https://www.w3schools.com/tags/ref_byfunc.asp