Front-End Development Introduction: HTML, CSS, JavaScript

Lesson# 1 - Introduction to Front-End Development Learning objectives • Realize some basic tasks in front-end development • Identify core technologies in front-end development What is Front-End Development? You surely would have come across multiple websites and may have seen varying styles, colors, themes, and layouts of these websites. Look at the figure below. It is the Login page of Facebook. You can see the title “Facebook” written in blue, placed on the left side of webpage and a form to the right side of the same page. There are two buttons; one is the “Log In” button colored blue while the second is for creating a new account colored in green. What you can notice is the proper structure and layout of this webpage. This way of structuring and rendering things on a webpage is what we call front-end development. It primarily deals with the look and feel of a webpage. 1. What are the tasks involved in Front-End Development? Now that you have some idea of what front-end development is. Let us look into some tasks specific to a front-end developer. A front-end developer is responsible for structuring content by following the User Interface (UI) design, which is the job of a web designer. Analysis of code and visual presentation of content in a way that not only is it responsive but also pertains to user experience, all these tasks are managed by a front-end developer. 1. Difference between Front-End and Back-End Have you ever noticed that Facebook’s login page always remains the same? Whenever you open that webpage, it always displays a form to log in and sign up. On the other hand, your Facebook news feed webpage is always changing and displaying latest posts by your friends and followed pages. If you look at your news feed of Facebook, you can see a search bar on top-left of the page, below it is Facebook stories, your contacts on the right, and then there is space in the middle for news feed. That is all what a front end is, the things you can view, how they are displayed, what styles are applied and what fonts are used. Front-end constitutes the interface with which the user interacts. However, there is another side of the same webpage. Do you wonder how you are actually able to see the latest posts by your friends? Your news feed is updated after every few minutes. You can view people’s stories every day. All these posts and stories change with time and display on the same page. That is where back-end development comes. A front-end developer can tell a web browser how it shall structure the content you want to display. A back-end developer on the other hand will program things in a way that every time new data can be populated on the same page without disturbing the styles and layout of webpage. A user cannot understand or see how dynamic data is being delivered to him on a webpage and that is why it is referred to as bank-end. Back-end developers work on making webpages dynamic and interactive. HTML, CSS and JavaScript As described in the above video, technologies used on the front-end of webpages are HTML, CSS and JavaScript. You can analyze the difference in purpose of each of the three languages in the figure below. Importance of Front-End Development Front-end has a crucial role in the development of web applications. A few points signifying their importance have been listed below: • Usability: Consideration of the effectiveness and efficiency of a web design so that the end user is satisfied with the overall experience. • Search Engine Optimization (SEO): Searching relevant information on a search engine becomes easier and more efficient if content in a webpage is properly formatted. • Responsive web design: A web page opened in a web browser on your laptop must look the same on your mobile phone or tablet. You will be learning Bootstrap for responsive web designs in upcoming topics. Lesson# 2 – URL - Uniform Resource Locator Learning objectives After completing this topic, a student will be able to: • Describe what the URL is • Describe what URI is • Identify the parts of a URL • Describe what is Dynamic URL • Describe what URL encoding is What is the World Wide Web? The World Wide Web, commonly known as The Web, is an information system where documents and other web resources are identified by Uniform Resource Locators, which may be interlinked by hyperlinks, and are accessible over the Internet. What is a Web Address? The web address contains information about the location of the webpage. It is also known as the URL. Like the address for your home, a web address organizes information about a webpage's location in a predictable way. Example: https://www.vu.edu.pk/ The ASCII Character Set ASCII stands for the "American Standard Code for Information Interchange". It was designed in the early '60s, as a standard character set for computers and electronic devices. ASCII is a 7-bit character set containing 128 characters. It contains the numbers from 0-9, the upper and lower-case English letters from A to Z, and some special characters. The character sets used in modern computers, in HTML, and on the Internet, are all based on ASCII. What is the URL? A URL is another word for a web address. A URL can be composed of words (e.g. example.com), or an Internet Protocol (IP) address (e.g. 192.68.20.50). Most people enter the name when surfing, because names are easier to remember than numbers. Web browsers request pages from web servers by using a URL. A URL is used to address a document (or other data) on the web. What is a protocol identifier? The protocol identifier indicates the name of the protocol to be used to fetch the resource. Example: http://example.com The example uses the Hypertext Transfer Protocol (HTTP), which is typically used to serve up hypertext documents. HTTP is just one of many different protocols used to access different types of resources on the net. What is a Dynamic URL? A dynamic URL is the address or URL of a Web page with content that depends on variable parameters that are provided to the server that delivers it. The parameters may be already present in the URL itself or they may be the result of user input. If the content of a web site is stored in a database and pulled for display on pages on demand, dynamic URLs may be used. In that case the web site serves basically as a template for the content. Usually, a dynamic URL would look something like this: http://code.google.com/p/google-checkout-php-sample-code/issues/detail?id=31. You can spot dynamic URLs by looking for characters like: ? = & etc. Lesson# 3 – HTTP Basics Learning objectives After completing this topic, a student will be able to: • Describe HTTP • Identify different forms of HTTP requests • Describe HTTPS What is HTTP and how does it work? Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests. What is request–response method? In computer science, request–response or request–reply is one of the basic methods computers use to communicate with each other in a network, in which the first computer sends a request for some data and the second responds to the request. What is HTTP caching? Caching is a technique that stores a copy of a given resource and serves it back when requested. When a web cache has a requested resource in its store, it intercepts the request and returns its copy instead of re-downloading from the originating server. Benefits of HTTP caching The performance of web sites and applications can be significantly improved by reusing previously fetched resources. Web caches reduce latency and network traffic and thus lessen the time needed to display a representation of a resource. By making use of HTTP caching, Web sites become more responsive. What is SSL? SSL stands for Secure Sockets Layer and, in short, it's the standard technology for keeping an internet connection secure and safeguarding any sensitive data that is being sent between two systems, preventing criminals from reading and modifying any information transferred, including potential personal details. What is SSL certificate? SSL certificates are small data files that cryptographically establish an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browser remain private. Lesson# 4 – Web Server, Services and Agents Learning objectives After completing this topic, a student will be able to: • Describe Web Server, Services and Agents What is a server? In computing, a server is a piece of computer hardware or software that provides functionality for other programs or devices, called "clients". This architecture is called the client–server model. What is a client? A client is a piece of computer hardware or software that accesses a service made available by a server as part of the client–server model of computer networks. The server is often on another computer system, in which case the client accesses the service by way of a network. What is an API? API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API. Understanding XML Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. XML is a markup language like HTML. XML was designed to store and transport data. Typically, Web Service resides on a Web Server using XML to communicate messages. XML is just information wrapped in tags. XML example <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The XML above is quite self-descriptive: It has sender information. It has receiver information It has a heading It has a message body. The XML language has no predefined tags. The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document. The Difference Between XML and HTML XML was designed to carry data with focus on what data is. HTML was designed to display data with a focus on how data looks. XML tags are not predefined like HTML tags are. Lesson# 5 – Domain, Hosting, FTP Learning objectives After completing this topic, a student will be able to: • Describe what is Domain Name • Identify Parts of Domain name • Describe what is hosting • Describe what is FTP, FTP server and FTP client What is a Domain Name? A domain name is a unique, easy-to-remember address used to access websites, such as 'google.com', and 'facebook.com'. Users can connect to websites using domain names thanks to the DNS system. What is DNS? The Domain Name System (DNS) is the phonebook of the Internet. When users type domain names such as ‘google.com’ or ‘nytimes.com’ into web browsers, DNS is responsible for finding the correct IP address for those sites. Browsers then use those addresses to communicate with origin servers to access website information. This all happens thanks to DNS servers: machines dedicated to answering DNS queries. What is Web hosting? Web hosting is a service that allows organizations and individuals to post a website or web page onto the Internet. A web host, or web hosting service provider, is a business that provides the technologies and services needed for the website or webpage to be viewed on the Internet. What is a packet? Packets are the basic units of communication over a TCP/IP network. Devices on a TCP/IP network divide data into small pieces, allowing the network to accommodate various bandwidths, to allow for multiple routes to a destination, and to retransmit the pieces of data which are interrupted or lost. Each piece is a packet, a term interchangeable with datagram. What is TCP? Transmission Control Protocol (TCP) – a connection-oriented communications protocol that facilitates the exchange of messages between computing devices in a network. What is FTP server? An FTP Server (which stands for File Transfer Protocol Server) is a software application which enables the transfer of files from one computer to another. If you send files using FTP, files are either uploaded or downloaded to the FTP server. When you’re uploading files, the files are transferred from a personal computer to the server. When you’re downloading files, the files are transferred from the server to your personal computer. What is FTP Client Software? An FTP Client is software designed to transfer files back-and-forth between a computer and a server over the Internet. It needs to be installed on your computer and can only be used with a live connection to the Internet. With an FTP Client uploading/downloading a file is really easy. Furthermore, FTP clients have some extra features. For example, you can resume a download that did not finish successfully. This is a very nice feature for people with slower Internet connections. Lesson# 6 – Fundamentals of HTML Learning objectives After completing this topic, a student will be able to: • Display text using HTML headings • Use horizontal Rules • Use <head> element • Use <title> element • Use HTML <meta> element • Use HTML Line Breaks What is HTML? HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page. Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other. Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc. Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of static or dynamic type. With the help of HTML only, we can create static web pages. Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content. HTML Tags HTML tags are like keywords which define how web browser will format and display the content. With the help of tags, a web browser can distinguish between HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags as you want as per your code requirement. All HTML tags must be enclosed within < > these brackets. Every tag in HTML performs different tasks. If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags) Syntax <tag> content </tag> What is Meta data? Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are typically used to specify character sets, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page but is machine parsable. Example: <head> <meta charset="UTF-8"> <meta name="description" content="Virtual University"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> What is a search engine? A search engine is a software program that helps people find the information they are looking for online using keywords or phrases. Search engines are able to return results quickly—even with millions of websites online— by scanning the Internet continuously and indexing every page they find. When a user enters a search term, the search engine looks at the website page titles, contents and keywords it has indexed and uses algorithms (step-by-step operations) to produce a list of sites—with the most relevant websites at the top of the list. Lesson# 7 – HTML Basics Learning objectives After completing this topic, a student will be able to: • Describe HTML document • Use HTML heading tags • Use HTML Paragraph element • Use HTML image element Definition of an HTML Document An HTML document is a file containing hypertext markup language. HTML code is based on tags, or hidden keywords, which provide instructions for formatting the document. A tag starts with an angle bracket and the 'less than' sign: '<'. The tag ends with an angle bracket and the 'greater than' sign '>'. Tags tell the processing program, often the web browser, what to do with the text. For example, to make the word 'Hello' bold, you would use the opening bold tag <b> and then the closing bold tag </b>, like this: <b>Hello</b> HTML is defined by the World Wide Web Consortium, an organization that regulates standards for the Internet. Each version of HTML has a set of definitions. Note that HTML is not a programming language. While we often refer to HTML markup as HTML code, programming languages require the processing of logical statements and math. HTML allows the developer to make text documents look engaging and pleasant. In most cases, programming on an HTML document is done with JavaScript. The Meaning of <!DOCTYPE html> The very first line in every web document should contain a <!DOCTYPE html> declaration. Even though it's wrapped in angle brackets, it is not a tag but a statement. Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly. The <html> tag The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag). What are HTML attributes? HTML attributes are special words used inside the opening tag to control the element's behavior. HTML attributes are modifiers of an HTML element type. All HTML elements can have attributes. Attributes provide additional information about elements. Attributes are always specified in the start tag. Attributes usually come in name/value pairs like name="value". The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: Example <img src="img_girl.jpg"> Lesson# 8 – HTML Elements and Attributes Learning objectives After completing this topic, a student will be able to: • Describe and use HTML Elements • Use nested HTML elements • Use empty HTML elements What is the element in HTML? An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element: <p> This is the content of the paragraph element. </p> What are HTML attributes? An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space-separated attribute/value pairs. For example: <img src="foobar.gif"> Case Insensitivity in HTML Tags and Attributes In HTML, tag and attribute names are not case-sensitive. It means the tag <P>, and the tag <p> defines the same thing in HTML which is a paragraph. Example <p>This is a paragraph.</p> <P>This is also a valid paragraph.</P> Empty HTML Elements Empty elements (also called self-closing or void elements) are not container tags — that means, you cannot write <hr>some content</hr> or <br>some content</br>. A typical example of an empty element is the <br> element, which represents a line break. Some other common empty elements are <img>, <input>, <link>, <meta>, <hr>, etc. Nesting HTML Elements HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. The following example contains four HTML elements (<html>, <body>, <h1> and <p>): Example <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Example Explained The <html> element is the root element, and it defines the whole HTML document. It has a start tag <html> and an end tag </html>. Then, inside the <html> element there is a <body> element: <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> The <body> element defines the document's body. It has a start tag <body> and an end tag </body>. Then, inside the <body> element there are two other elements: <h1> and <p>: <h1>My First Heading</h1> <p>My first paragraph.</p> The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>: <h1>My First Heading</h1> The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>: <p>My first paragraph.</p> Lesson# 9 – HTML Elements and Attributes_2 Learning objectives After completing this topic, a student will be able to: • Describe and Use different HTML attributes • Describe why Always Use Lowercase Attributes • Describe why Always Quote Attribute Values Recap An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. An attribute defines a property for an element. HTML elements can be nested (this means that elements can contain other elements). Empty elements (also called self-closing or void elements) are not container tags. In HTML, tag and attribute names are not case-sensitive. The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML4, and demands lowercase for stricter document types. HTML lang Attribute The lang attribute specifies the language of the element's content. Common examples are "en" for English, "es" for Spanish, "fr" for French, and so on. Syntax <element lang="language_code"> Example <!DOCTYPE html> <html lang="en-US"> <body> <h1>My Heading</h1> <p>My paragraph</p> </body> </html> HTML title Attribute The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful). Syntax <element title="text"> Example <p title="paragraph"> This is a paragraph. </p> Different HTML Attributes All HTML elements can have attributes • The href attribute of <a> specifies the URL of the page the link goes to • The src attribute of <img> specifies the path to the image to be displayed • The width and height attributes of <img> provide size information for images • The alt attribute of <img> provides an alternate text for an image • The style attribute is used to add styles to an element, such as color, font, size, and more • The lang attribute of the <html> tag declares the language of the Web page • The title attribute defines some extra information about an element • The disabled attribute is a boolean attribute. When present, it specifies that the element should be disabled. • The id attribute specifies a unique id for an HTML element. • The value attribute specifies the value of an <input> element. Lesson# 10 – Heading and Paragraph Learning objectives After completing this topic, a student will be able to: • Display text using HTML headings • Use horizontal Rules • Use <head> element • Use <title> element • Use HTML <meta> element • Use HTML Line Breaks • Use HTML <pre> element What is HTML? HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page. Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other. Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc. Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of static or dynamic type. With the help of HTML only, we can create static web pages. Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content. HTML Tags HTML tags are like keywords which define how web browser will format and display the content. With the help of tags, a web browser can distinguish between HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement. All HTML tags must be enclosed within < > these brackets. Every tag in HTML performs different tasks. If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags) Syntax <tag> content </tag> What is Meta data? Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are typically used to specify character sets, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page but is machine parsable. Example: <head> <meta charset="UTF-8"> <meta name="description" content="Virtual University"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> What is a search engine? A search engine is a software program that helps people find the information they are looking for online using keywords or phrases. Search engines are able to return results quickly—even with millions of websites online— by scanning the Internet continuously and indexing every page they find. When a user enters a search term, the search engine looks at the website page titles, contents and keywords it has indexed and uses algorithms (step-by-step operations) to produce a list of sites—with the most relevant websites at the top of the list. Lesson# 11 – HTML Styling Learning objectives After completing this topic, a student will be able to: • Use HTML styling • Use HTML style attribute • Use different properties of the style attribute • Use HTML formatting elements HTML Tags HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever written inside < and > are called tags. Example: <b> </b> HTML elements HTML elements: Elements enclose the contents in between the tags. They consist of some kind of structure or expression. It generally consists of a start tag, content and an end tag. Example: <b>This is the content</b> Where, <b> is the starting tag and </b> is the ending tag. HTML Attributes HTML Attributes: It is used to define the character of an HTML element. It is always placed in the opening tag of an element. It generally provides additional styling (attribute) to the element. Example: <p align="center">This is paragraph</p> What is HTML Style Attribute? The style attribute specifies an inline style for an element. The style attribute will override any style set globally. The HTML style attribute has the following syntax: style="property:value" Example Use of the style attribute in an HTML document: <h1 style="color:blue;text-align:center">This is a header</h1> <p style="color:green">This is a paragraph.</p> Result: HTML Style Properties • Use background-color for background color • Use color for text colors • Use font-family for text fonts • Use font-size for text sizes • Use text-align for text alignment HTML Formatting Elements HTML also defines special elements, for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic. Following are some of the formatting elements: HTML <b> element The HTML <b> element defines bold text, without any extra importance. <p>This text is normal</p> <p><b>This text is bold</b>.</p> The HTML <i> element The HTML <i> element defines italic text, without any extra importance. <p>This text is normal.</p> <p><i>This text is italic</i>.</p> The HTML <em> element The HTML <em> element defines emphasized text, with added semantic importance. <p>This text is normal.</p> <p><em>This text is emphasized</em>.</p> The HTML <small> element The HTML <small> element defines small text: <h2>HTML <small>Small</small> Formatting</h2> The HTML <mark> element The HTML <mark> element defines marked or highlighted text: <h2>HTML <mark>Marked</mark> Formatting</h2> The HTML <del> element The HTML <del> element defines deleted (removed) of text. <p>My favorite color is <del>blue</del> red.</p> The HTML <sub> element The HTML <sub> element defines subscripted text. <p>This is <sub>subscripted</sub> text.</p> Lesson# 12 – HTML Quotations Learning objectives After completing this topic, a student will be able to: • Describe and use different tags for HTML quotations Quotations in HTML Many times, there is a need to add quotations in HTML. These might include popular sayings, important references, or even addresses. There are many tags that are used for this purpose. In this topic we will study HTML quotations and associated tags. HTML Quotation tags Mostly, the <q> tag is used to define short quotations and the <blockquote> tag is used to define a large quotation. These quotations are displayed as a different text altogether, with different alignment, quotation marks, italicized, etc. Tag Description <abbr> Defines an abbreviation or acronym <address> Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a section that is quoted from another source <cite> Defines the title of a work <q> Defines a short inline quotation Lesson# 13 – HTML Computer Code Learning objectives After completing this topic, a student will be able to: • Describe and use different elements related to HTML computer code formatting Introduction Being able to manage the text size is important in web design. Normally, HTML uses variable letter size, and variable letter spacing. When we are programming, sometimes it is mandatory to show the Output result, error message, or coding part to user on a webpage. Hence to solve this issue HTML uses different tags for the user inputs, codes, programs, etc. With the help of these tags, you will be able to write codes to display on your webpage. Following is a list of some tags which are used in HTML for this task. • <code> • <kbd> • <samp> • <var> HTML Computer Code Elements HTML contains several elements for defining user input and computer code. HTML Code Formatting The HTML <code> element defines programming code: Example: <code> var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" } </code> HTML Variable Formatting The HTML <var> element defines a mathematical variable: Example: <p>Einstein wrote:</p> <p><var>E = m c<sup>2</sup></var></p> HTML <kbd> For Keyboard Input The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font. Example: <p>To open a file, select:</p> <p><kbd>File | Open...</kbd></p> HTML <samp> For Program Output The HTML <samp> element is used to define sample output from a computer program. Example: <samp> demo.example.com login: Apr 12 09:10:17Linux 2.6.10grsec+gg3+e+fhs6b+nfs+gr0501 </samp> Lesson# 14 – HTML Comments Learning objectives After completing this topic, a student will be able to: • Describe and use HTML comment tags What is a comment? In computer programming, a comment is a programmer-readable explanation or annotation in the source code of a computer program. They are added with the purpose of making the source code easier for humans to understand and are generally ignored by compilers and interpreters. Comments in HTML Comment is a piece of code which is ignored by any web browser. It is good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability. How to write comments in HTML? You can add comments to your HTML source by using the following syntax:  Example:  <p>This is a paragraph.</p>  Multiline Comments So far, we have seen single line comments, but HTML supports multi-line comments as well. You can comment multiple lines by the special beginning tag  placed before the first line and end of the last line as shown in the given example below. Example: <!DOCTYPE html> <html> <head> <title>Multiline Comments</title> </head> <body> <!-This is a multiline comment and it can span through as many as lines you like. --> <p>Document content goes here.....</p> </body> </html> Conditional Comments Conditional comments only work in Internet Explorer (IE) on Windows, but they are ignored by other browsers. They are supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of IE. Example:  Lesson# 15 – HTML Links Learning objectives After completing this topic, a student will be able to: • Describe and use Hyperlinks • Use Absolute URLs and Relative URLs • Change style of links • Use Image as link • Create bookmarks inside HTML documents using id attribute Introduction A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus, you can create hyperlinks using text or images available on a webpage. How to specify a link in HTML? A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. The <a> tag The HTML <a> tag defines a hyperlink. It has the following syntax: <a href="url">link text</a> Example <a href=“http://google.com">This is a Link to Google</a> Attributes related to <a> tag href The most important attribute of the <a> element is the href attribute, which indicates the link's destination. <a href=“http://google.com">This is a Link to Google</a> The target Attribute The target attribute specifies where to open the linked document. Let’s see an example that will open the linked document in a new browser window or in a new tab. <a href=“http://www.google.com/” target="_blank“ >Visit Google!</a> The target attribute can have one of the following values: • _self - Default. Opens the document in the same window/tab as it was clicked • _blank - Opens the document in a new window or tab • _parent - Opens the document in the parent frame • _top - Opens the document in the full body of the window • Framename-Opens the linked document in a named frame The id Attribute The id attribute can be used to create bookmarks inside HTML documents. Bookmarks are not displayed in any special way. They are invisible to the reader. Add an id attribute to any <a> element: <a id="tips">Useful Tips Section</a> Then create a link to the <a> element (tips): <a href="#tips">View Tips</a> Create a link to the <a> element (tips) from another page: <a href=“page.htm#tips">Let See Tips</a> Absolute URLs vs. Relative URLs Absolute URL is a full web address in the href attribute. A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part). Example <h2>Absolute URLs</h2> <p><a href="https://www.google.com/">Google</a></p> <h2>Relative URLs</h2> <p><a href="html_images.asp">HTML Images</a></p> Image as Link In HTML, it is common to use images as links. As in the following example: <a href="default.html"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </a> Styling Links The <style> HTML element is used to style links. The <style> HTML element contains style information for a document, or part of a document. The <style> element must be included inside the <head> of the document. Links can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked Example unvisited link a:link { color: red; } visited link a:visited { color: green; } mouse over link a:hover { color: hotpink; } selected link a:active { color: blue; } Lesson# 16 – HTML Images Learning objectives After completing this topic, a student will be able to: • Use HTML images • Set height and width of an image • Use image as a link • Use image maps Introduction Images are very important to beautify as well as to depict many complex concepts in simple ways on your web page. Images can improve the design and the appearance of a web page. Insert Image You can insert any image in your web page by using <img> tag. Example <img src="pic_trulli.jpg" alt="Italian Trulli"> HTML Images Syntax The <img> tag is empty, it contains attributes only and does not have a closing tag. The <img> tag has two required attributes: src - Specifies the path to the image alt - Specifies an alternate text for the image Syntax <img src="url" alt="alternatetext"> Setting width and height of an image You can use the style attribute to specify the width and height of an image. The values are specified in pixels (use px after the value) Example <img src="html5.gif" alt="HTML5 Icon“ style= "width:128px; height:128px"> Width and height of an image can also be set with attributes Example <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> We suggest you use the style attribute. It prevents styles sheets from changing the default size of images. Images in Another Folder If not specified, the browser expects to find the image in the same folder as the web page. However, it is common on the web to store images in a sub-folder. If you have your images in a sub-folder, you must include the folder name in the src attribute: Example <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px; height:128px;"> Images on Another Server/Website Some web sites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the src attribute: Example: <img src="http://www.google.com/images/srpr/logo11w.png"> Images Maps HTML <map> tag The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags. The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. Insert Image The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute: <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> Create Image Map Then, add a <map> element. The <map> element is used to create an image map, and is linked to the image by using the required name attribute: <map name="workmap"> The name attribute must have the same value as the <img>'s usemap attribute. The Areas Then, add the clickable areas. A clickable area is defined using an <area> element. Shape You must define the shape of the clickable area, and you can choose one of these values: rect - defines a rectangular region circle - defines a circular region poly - defines a polygonal region default - defines the entire region The co-ordinates Shape="rect" The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis. The coordinates 34,44 are located 34 pixels from the left margin and 44 pixels from the top: The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top: Example <area shape="rect" coords="34, 44, 270, 350" href="computer.htm"> This is the area that becomes clickable and will send the user to the page "computer.htm" Shape="circle" To add a circle area, first locate the coordinates of the center of the circle: 337,300 Then specify the radius of the circle: 44 pixels Example <area shape="circle" coords="337, 300, 44" href="coffee.htm"> This is the area that becomes clickable and will send the user to the page "coffee.htm": Complete code <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map> Lesson# 17 – HTML Tables Learning objectives After completing this topic, a student will be able to: • Use HTML tables • Use borders with tables • Use table headings Introduction The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. Defining HTML Tables • Tables are defined with the <table> tag. • Tables are divided into table rows with the <tr> tag. • Table rows are divided into table data with the <td> tag. Table example <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> Out Put An HTML Table with a Border Attribute Example: <table border="1" style="width:100%"> <tr><td>Jill</td> <td>Smith</td> <td>50</td> </tr><tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table> Out Put HTML Table Headings Table headings are defined with the <th> tag. Example: <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr><tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> Output Lesson# 18 – HTML Tables Handling Learning objectives After completing this topic, a student will be able to: • Use different attributes (colspan, rowspan, cellpadding and cellspacing) related to HTML tables • Use HTML table captions HTML tables (Recap) You can create a table in an HTML document. Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute. Table headings are defined with the <th> tag. Table Cells that Span Many Columns To make a cell span more than one column, use the colspan attribute Example <table style="width:100%"> <tr><th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> Out Put Table Cells that Span Many Rows To make a cell span more than one row, use the rowspan attribute Example <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr><tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr><tr> <td>555 77 855</td> </tr></table> Out Put Caption Tag To add a caption to a table, use the <caption> tag: Example <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr></table> Out Put Cellpadding and Cellspacing Attributes There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell. Lesson# 19 – HTML List Learning objectives After completing this topic, a student will be able to: • Use Unordered HTML Lists • Give style to Unordered HTML Lists • Use Ordered HTML Lists • Use HTML Description Lists • Use Nested HTML Lists HTML Lists Lists are an incredibly useful HTML structure that allows you to group related content. If you think about it, we, as regular people, think of things in terms of lists. To do lists, shopping lists, and so on. And therefore, it's totally natural that lists appeal to us as an organization tool. HTML lists allow web developers to group a set of related items in lists. Example An unordered HTML list: • Item • Item • Item • Item An ordered HTML list: 1. First item 2. Second item 3. Third item 4. Fourth item Unordered HTML Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles). Example Out Put <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> A style attribute can be added to an unordered list, to define the style of the mark For example Circle Out Put <ul style="list-style-type:circle"> o Coffee <li>Coffee</li> o Tea <li>Tea</li> o Milk <li>Milk</li> </ul> Ordered HTML List An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default: Example Out Put <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> The type attribute of the <ol> tag, defines the type of the list item marker: Type 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 Example Out Put Upper Case: Upper Case: <ol type="A"> A. Coffee <li>Coffee</li> B. Tea <li>Tea</li> C. Milk <li>Milk</li> </ol> HTML Description Lists A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term: Example <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> Nested HTML Lists Lists can be nested (list inside list): Out Put Example Out Put <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Lesson# 20 – HTML Blocks Learning objectives After completing this topic, a student will be able to: • Use block level elements • Use inline elements • Use <div> element as container for other HTML elements • Use <span> Element as a container for text HTML - Blocks All the HTML elements can be categorized into two categories • Block Level Elements • Inline Elements Block Elements Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line. Inline Elements Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements. Block-level Elements A block-level element always starts on a new line. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). A block level element has a top and a bottom margin, whereas an inline element does not. The HTML <div> Element The HTML <div> element is a block level element that can be used as a container for other HTML elements. When used together with CSS, the <div> element can be used to style blocks of content. Example Out Put <div style="backgroundcolor:blue;color:white;"> <h2>Some heading</h2> <p>Some text content</p> </div> Inline Elements An inline element does not start on a new line. An inline element only takes up as much width as necessary. The HTML <span> Element The HTML <span> element is an inline element that can be used as a container for text. When used together with CSS, the <span> element can be used to style parts of the text. Example Out Put <h1>My <span style="color:red">Important</span> Heading</h1> Lesson# 21 – HTML Layout Learning objectives After completing this topic, a student will be able to: • Use div element to create HTML layout • Use HTML Layout Elements to create layout • Use HTML tables to create layouts Webpage Layout A webpage layout is very important to give a better look to your website. It takes considerable time to design a website's layout with a great look and feel. Nowadays, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. HTML Layout using <div> Elements The <div> element is a block level element used for grouping HTML elements. Using the <div> elements is the most common method of creating layouts in HTML. The CSS CSS stands for Cascading Style Sheets. CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts etc. In this topic internal CSS is used. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. We will study CSS in detail in upcoming topics. Website layout using HTML 5 HTML has several semantic elements that define the different parts of a web page: • <header> - Defines a header for a document or a section • <nav> - Defines a set of navigation links • <section> - Defines a section in a document • <article> - Defines independent, selfcontained content • <aside> - Defines content aside from the content (like a sidebar) • <footer> - Defines a footer for a document or a section • <details> - Defines additional details that the user can open and close on demand • <summary> - Defines a heading for the <details> element HTML Layout Using Tables Layout can be achieved using the <table> element, because table elements can be styled with CSS however table element was not designed to be a layout tool. Lesson# 22 – HTML Iframe Learning objectives After completing this topic, a student will be able to: • Use iframes • Set size of iframe • Remove border of an iframe • Use iframe as a Target for a Link Inline frame in HTML You can define an inline frame with HTML tag <iframe>. It can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. The src attribute is used to specify the URL of the document that occupies the inline frame. An inline frame is used to embed another document within the current HTML document. Syntax <iframe src="url" title="description"></iframe> Iframe An HTML iframe is used to display a web page within a web page. Example Out Put <iframe src="demo_iframe.htm" title="Iframe Example"></iframe> Iframe - Set Height and Width Use the height and width attributes to specify the size of the iframe. Example <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> Or you can add the style attribute and use the CSS height and width properties: Example <iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe> Iframe - Remove the Border To remove the border, add the style attribute and use the CSS border property: Example <iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe> Iframe - Target for a Link An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe: Example <iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe> <p><a href="https://www.vu.edu.pk" target="iframe_a">Virtual University</a></p> Out Put Lesson# 23 – HTML Forms Learning objectives After completing this topic, a student will be able to: • Use HTML Forms • Use different types of <input> Elements • Use Form Attributes • Use <fieldset> and <legend> elements HTML 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, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as 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. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. HTML Form Example The <form> Element The HTML <form> element is used to create an HTML form for user input: <form> . form elements . </form> The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. The <input> Element The HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute. Type Description <input type="text"> Displays a single-line text input field <input type="radio"> Displays a radio button (for selecting one of many choices) Example <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) <input type="submit"> Displays a submit button (for submitting the form) <input type="button"> Displays a clickable button HTML Form Attributes The Action Attribute The action attribute defines the action to be performed when the form is submitted. It defines the particular location where the form data is to be submitted. Example <form action="/action_page.php"> The Target Attribute The target attribute specifies where to display the response that is received after submitting the form. The target attribute can have one of the following values: Value Description _blank The response is displayed in a new window or tab _self The response is displayed in the current window _parent The response is displayed in the parent frame _top The response is displayed in the full body of the window framename The response is displayed in a named iframe The default value is _self which means that the response will open in the current window. Example <form action="/action_page.php" target="_blank"> The Method Attribute The method attribute specifies the HTTP method to be used when submitting the form data. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post"). The default HTTP method when submitting form data is GET. When you use GET, the form data will be visible in the page address. The POST method offers better security because the submitted data is not visible in the page address. Name Attribute The name attribute specifies a name for an HTML element. To be submitted correctly, each input field must have a name attribute. <fieldset> and <legend> elements The <fieldset> element groups related data in a form. The <legend> element defines a caption for the <fieldset> element. Lesson# 24 – HTML Colors Learning objectives After completing this topic, a student will be able to: • Use HTML colors by color names • Use HTML colors as hexadecimal values • Use HTML colors as RGB values HTML Colors Colors are very important to give a good look and feel to your website. You can select background colors, text color etc. of each element as per your choice. You can select colors for each link (a:link, a:visited, a:hover, a:active). Colors are displayed combining RED, GREEN, and BLUE light. Colors in HTML can be specified as: • Hexadecimal colors • RGB colors • Color names Hexadecimal Colors A hexadecimal color is specified with: #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color. For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00. RGB Colors An RGB color value is specified with: rgb( RED , GREEN , BLUE ). Each parameter defines the intensity of the color as an integer between 0 and 255. For example, rgb(0,0,255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0. Color Names With CSS, colors can be set by using color names: Lesson# 25 – HTML Head Learning objectives After completing this topic, a student will be able to: • Use different Elements related to HTML <Head> element HTML <head> element The <head> element primarily is the container for all the head elements, which provide extra information about the document (metadata), or reference to other resources that are required for the document to display or behave correctly in a web browser. The head elements collectively describes the properties of the document such as title, provide meta information like character set, instruct the browser where to find the style sheets or scripts that allows you to extend the HTML document in a highly active and interactive ways. HTML <head> element The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>. The HTML <title> Element The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results. Example Out Put <!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html> The HTML <style> Element The <style> element is used to define style information for a single HTML page: Example <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> Out Put body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> The HTML <link> Element The <link> element defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets: Example <link rel="stylesheet" href="mystyle.css"> The HTML <meta> Element The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. Examples Define the character set used: <meta charset="UTF-8"> Define keywords for search engines: <meta name="keywords" content="HTML, CSS, JavaScript"> Define a description of your web page: <meta name="description" content="Free Web tutorials"> Define the author of a page: <meta name="author" content="John Doe"> Refresh document every 30 seconds: <meta http-equiv="refresh" content="30"> Setting the viewport to make your website look good on all devices: <meta name="viewport" content="width=device-width, initial-scale=1.0"> The HTML <script> Element The <script> element is used to define client-side JavaScript. Example <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> The HTML <base> Element The <base> element specifies the base URL and/or target for all relative URLs in a page. The <base> tag must have either an href or a target attribute present, or both. Example <base href="http://www.google.com/images/" target="_blank"> Lesson# 26 – HTML Entities and Symbols Learning objectives After completing this topic, a student will be able to: • Use HTML Entities and Symbols HTML Entities and Symbols Some characters are reserved in HTML, e.g. you cannot use the less than (<) or greater than (>) signs or angle brackets within your text, because the browser could mistake them for markup, while some characters are not present on the keyboard like copyright symbol ©. To display these special characters, they must be replaced with the character entities. Character entity references, or entities for short, enable you to use the characters that cannot be expressed in the document's character encoding or that cannot be entered by a keyboard. Some Useful HTML Character Entities Result Description Entity Name Entity Number non-breaking space     < less than < < > greater than > > & ampersand & & " double quotation mark " " ' single quotation mark (apostrophe) ' ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € © copyright © © ® registered trademark ® ® Combining Diacritical Marks A diacritical mark is a "glyph" added to a letter. Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents. Here are some examples: Mark Character Construct Result ̀ a à à ́ a á á a â â a ã ã ̂ ̃ ̀ O Ò Ò ́ O Ó Ó O Ô Ô O Õ Õ ̂ ̃ HTML Symbol Entities Many mathematical, technical, and currency symbols, are not present on a normal keyboard. To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol. Some Mathematical Symbols Supported by HTML Char Number Entity Description ∀ ∀ ∀ FOR ALL ∂ ∂ ∂ PARTIAL DIFFERENTIAL ∃ ∃ ∃ THERE EXISTS ∅ ∅ ∅ EMPTY SETS ∇ ∇ ∇ NABLA ∈ ∈ ∈ ELEMENT OF ∉ ∉ ∉ NOT AN ELEMENT OF ∋ ∋ &ni; CONTAINS AS MEMBER ∏ ∏ ∏ N-ARY PRODUCT ∑ ∑ ∑ N-ARY SUMMATION Some Greek Letters Supported by HTML Char Number Entity Description Α Α Α GREEK CAPITAL LETTER ALPHA Β Β Β GREEK CAPITAL LETTER BETA Γ Γ Γ GREEK CAPITAL LETTER GAMMA Δ Δ Δ GREEK CAPITAL LETTER DELTA Ε Ε Ε GREEK CAPITAL LETTER EPSILON Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA Some Other Entities Supported by HTML Char Number Entity Description © © © COPYRIGHT SIGN ® ® ® REGISTERED SIGN € € € EURO SIGN ™ ™ ™ TRADEMARK ← ← ← LEFTWARDS ARROW ↑ ↑ ↑ UPWARDS ARROW → → → RIGHTWARDS ARROW ↓ ↓ ↓ DOWNWARDS ARROW ♠ ♠ &spades; BLACK SPADE SUIT ♣ ♣ &clubs; BLACK CLUB SUIT ♥ ♥ &hearts; BLACK HEART SUIT ♦ ♦ &diams; BLACK DIAMOND SUIT Lesson# 27 – HTML Encoding (Character Sets) Learning objectives After completing this topic, a student will be able to: • Use different HTML character sets HTML Encoding Character encoding is a method of converting bytes into characters. To validate or display an HTML document properly, a program must choose a proper character encoding. The most common character set or character encoding in use on computers is ASCII − The American Standard Code for Information Interchange, and this is probably the most widely used character set for encoding text electronically. ASCII defined 128 different characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > . However, many languages use either accented Latin characters or completely different alphabets. ASCII does not address these characters; therefore, you need to learn about character encodings if you want to use any non-ASCII characters. The HTML charset Attribute To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the <meta> tag: For HTML4: <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> For HTML5: <meta charset="UTF-8"> The ASCII Character Set ASCII uses the values from 0 to 31 (and 127) for control characters. ASCII uses the values from 32 to 126 for letters, digits, and symbols. ASCII does not use the values from 128 to 255. The ANSI Character Set (Windows-1252) ANSI is identical to ASCII for the values from 0 to 127. ANSI has a proprietary set of characters for the values from 128 to 159. ANSI is identical to UTF-8 for the values from 160 to 255. The ISO-8859-1 Character Set ISO-8859-1 is identical to ASCII for the values from 0 to 127. ISO-8859-1 does not use the values from 128 to 159. ISO-8859-1 is identical to UTF-8 for the values from 160 to 255. The UTF-8 Character Set UTF-8 is identical to ASCII for the values from 0 to 127. UTF-8 does not use the values from 128 to 159. UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255. UTF-8 continues from the value 256 with more than 10 000 different characters. Lesson# 28 – HTML URL Encoding Learning objectives After completing this topic, a student will be able to: • Describe URL encoding • Use HTML Uniform Resource Locators What is a URL? A URL is another word for a web address. A URL can be composed of words (e.g. example.com), or an Internet Protocol (IP) address (e.g. 192.68.20.50). Most people enter the name when surfing, because names are easier to remember than numbers. Web browsers request pages from web servers by using a URL. A URL is used to address a document (or other data) on the web. When you click on a link in an HTML page, an underlying <a> tag points to an address on the web. A web address, like http://www.htmllectures.com/html/default.asp Follows these syntax rules: scheme://host.domain:port/path/filename scheme - defines the type of Internet service (most common is http) host - defines the domain host (default host for http is www) domain - defines the Internet domain name (google.com) port - defines the port number at the host (default for http is 80) path - defines a path at the server (If omitted: the root directory of the site) filename - defines the name of a document or resource Post Text What is URL encoding URL encoding is the practice of translating unprintable characters or characters with special meaning within URLs to a representation that is unambiguous and universally accepted by web browsers and servers. URLs can only be sent over the Internet using the ASCII character-set. Since URLs often contain characters outside the ASCII set, the URL has to be converted into ASCII. URL encoding converts characters into a format that can be transmitted over the Internet. Lesson# 29 – HTML and XHTML Learning objectives After completing this topic, a student will be able to: • Differentiate between HTML and XHTML • Convert from HTML to XHTML • Describe what is XHTML • Describe the importance of XHTML What is XHTML • XHTML stands for EXtensible HyperText Markup Language. It is a cross between HTML and XML language. • XHTML is almost identical to HTML but it is stricter than HTML. XHTML is HTML defined as an XML application. It is supported by all major browsers. • Although XHTML is almost the same as HTML but It is more important to create your code correctly, because XHTML is stricter than HTML in syntax and case sensitivity. XHTML documents are well-formed and parsed using standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser. Why use XHTML XHTML was developed to make HTML more extensible and increase interoperability with other data formats. There are two main reasons behind the creation of XHTML: • It creates a stricter standard for making web pages, reducing incompatibilities between browsers. So it is compatible for all major browsers. • It creates a standard that can be used on a variety of different devices without changes. The Most Important Differences from HTML • <!DOCTYPE> is mandatory • The xmlns attribute in <html> is mandatory • <html>, <head>, <title>, and <body> are mandatory • Elements must always be properly nested • Elements must always be closed • Elements must always be in lowercase • Attribute names must always be in lowercase • Attribute values must always be quoted • Attribute minimization is forbidden Lesson# 30 – Introduction to CSS Learning objectives After completing this topic, a student will be able to: • Describe CSS • Describe the advantages of CSS Cascading Style Sheets Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, and variations in display for different devices and screen sizes as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML. Advantages of CSS CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times. Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. Lesson# 31 – CSS Syntax Learning objectives After completing this topic, a student will be able to: • Use CSS • Use CSS comments CSS style rules A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts − Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc. Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc. Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc. CSS Syntax The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. Example <!DOCTYPE html> <html> <head> <style> p{ color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>These paragraphs are styled with CSS.</p> </body> </html> Out Put CSS Comments CSS Comments are used to explain the CSS codes which you wrote to define the colors and style for html elements. CSS comments start with /* and end with */ Lesson# 32 – CSS Selectors Learning objectives After completing this topic, a student will be able to: • Use different types of CSS selectors Importance of Cascading Style Sheets Cascading Style Sheets, referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document. A CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule set consists of a selector and declaration block. A CSS selector selects the HTML element(s) you want to style. The CSS element Selector The element selector selects HTML elements based on the element name. Example p{ text-align: center; color: red; } The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. Example #para1 { text-align: center; color: red; } The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. Example .center { text-align: center; color: red; } Lesson# 33 – CSS Insertion Learning objectives After completing this topic, a student will be able to: • Insert CSS into a web page Ways to Insert CSS Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. Three Ways to Insert CSS There are three ways of inserting a style sheet: • External CSS • Internal CSS • Inline CSS External CSS With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. An external style sheet can be written in any text editor, and must be saved with a .css extension. The external .css file should not contain any HTML tags. Internal CSS An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section. Inline CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Cascading Order What style will be used when there is more than one style specified for an HTML element? All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: 1. Inline style (inside an HTML element) 2. External and internal style sheets (in the head section) 3. Browser default So, an inline style has the highest priority and will override external and internal styles and browser defaults. Lesson# 34 – CSS Background Learning objectives After completing this topic, a student will be able to: • Use CSS Background properties CSS background CSS background properties help us style the background of elements. The CSS background property is a shorthand for specifying the background of an element. background-color, background-image, background-repeat, background-position etc. together comprise the CSS background properties. CSS background-color The background-color property specifies the background color of an element. Example body { background-color: lightblue; } Opacity / Transparency The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent: Example div { background-color: green; opacity: 0.3; } background-image property The background-image property specifies an image to use as the background of an element. Example body { background-image: url("paper.gif"); } background-repeat property The background-repeat property sets if/how a background image will be repeated. CSS Syntax background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; Property Values Value Description repeat The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default repeat-x The background image is repeated only horizontally repeat-y The background image is repeated only vertically no-repeat The background-image is not repeated. The image will only be shown once space The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images round The background-image is repeated and squished or stretched to fill the space (no gaps) initial Sets this property to its default value. inherit Inherits this property from its parent element. CSS background-position The background-position property is used to specify the position of the background image. Example body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } CSS background - Shorthand property To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property. Example body { background: #ffffff url("img_tree.png") no-repeat right top; } Lesson# 35 – CSS Text and Fonts Learning objectives After completing this topic, a student will be able to: • Use CSS properties to style text and fonts CSS Text and Fonts CSS has different properties for text and font decoration. Using CSS we can manipulate the text in different ways such as we can set color of text, we can set indentation of text, we can transform the text and so on. Similarly using different CSS properties, we can also control the font of our web page. Text Color The color property is used to set the color of the text. Example body { color: blue; } Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. Example p{ text-transform: uppercase; } text-indent The text-indent property specifies the indentation of the first line in a text-block. Example p{ text-indent: 50px; } font-family The font-family property specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Example p { font-family: "Times New Roman", Times, serif; } For fonts having space in between should be closed inside the double quotes. Lesson# 36 – CSS Text and Fonts Learning objectives After completing this topic, a student will be able to: • Use CSS Font-style property • Use CSS font-size property CSS Text and Fonts CSS has different properties for text and font decoration. Using CSS we can manipulate the text in different ways such as we can set color of text, we can set indentation of text, we can transform the text and so on. Similarly using different CSS properties, we can also control the font of our web page. Font-style property The font-style property is mostly used to specify italic text. This property has three values: • normal - The text is shown normally • italic - The text is shown in italics • oblique - The text is "leaning" (oblique is very similar to italic, but less supported) Font Size The font-size property sets the size of the text. The font-size value can be an absolute, or relative size. Absolute size: • Sets the text to a specified size • Does not allow a user to change the text size in all browsers (bad for accessibility reasons) • Absolute size is useful when the physical size of the output is known Relative size: • Sets the size relative to surrounding elements • Allows a user to change the text size in browsers Set Font Size with Pixels Setting the text size with pixels gives you full control over the text size: Example h1 { font-size: 40px; } Set Font Size With Em To allow users to resize the text (in the browser menu), many developers use em instead of pixels. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em Example h1 { font-size: 2.5em; } Lesson# 37 – CSS Links Learning objectives After completing this topic, a student will be able to: • Use CSS to style links Styling Links Links can be styled with any CSS property; links can be styled differently depending on what state they are in. The four links states are: • a:link - a normal, unvisited link • a:visited - a link the user has visited • a:hover - a link when the user mouses over it • a:active - a link the moment it is clicked Text Decoration The text-decoration property is mostly used to remove underlines from links: Example a:link { text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: underline;} Background Color The background-color property can be used to specify a background color for links: Example a:link {background-color: yellow;} a:visited { background-color: cyan;} a:hover { background-color: lightgreen;} a:active { background-color: hotpink;} Lesson# 38 – CSS Lists Learning objectives After completing this topic, a student will be able to: • Use CSS list properties HTML Lists Lists are an incredibly useful HTML structure that allows you to group related content. Unordered list An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles). Ordered list An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default. CSS list properties The CSS list properties allow you to: • Set different list item markers for ordered lists • Set different list item markers for unordered lists • Set an image as the list item marker • Add background colors to lists and list items Different List Item Markers The list-style-type property specifies the type of list item marker. Example ul.a { list-style-type: circle;} ul.b { list-style-type: square;} ol.c { list-style-type: upper-roman;} ol.d { list-style-type: lower-alpha;} An Image as The List Item Marker The list-style-image property specifies an image as the list item marker: Example ul { list-style-image: url('sqpurple.gif'); } Position The List Item Markers The list-style-position property specifies the position of the list-item markers (bullet points). Example ul.a { list-style-position: outside;} ul.b {list-style-position: inside;} Remove Default Settings The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol> Example ul { list-style-type: none; margin: 0; padding: 0; } List - Shorthand property The list-style property is a shorthand property. It is used to set all the list properties in one declaration Example ul { list-style: square inside url("sqpurple.gif"); } Lesson# 39 – CSS Tables Learning objectives After completing this topic, a student will be able to: • Use CSS Tables properties CSS Tables We can set different properties of an HTML table using CSS. Such as we can specify table borders in CSS we can specify whether the table borders are collapsed into a single border or separated, we can set Table Width and Height, we can set text alignment, we can set Table Padding and Table Color etc. Table borders To specify table borders in CSS, use the border property: The example below specifies a black border for <table>, <th>, and <td> elements: table, th, td { border: 1px solid black;} Collapse Table Borders The border-collapse property sets whether the table borders should be collapsed into a single border. Example table { border-collapse: collapse;} Table Width and Height The width and height of a table are defined by the width and height properties. Example table { width: 100%;} th { height: 70px;} Horizontal Alignment The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>. Example td {text-align: center;} Vertical Text Alignment The vertical-align property sets the vertical alignment (like top, bottom, or middle). Example td { height: 50px; vertical-align: bottom; } Table Padding To control the space between the border and the content in a table, use the padding property. Example th, td { padding: 15px; text-align: left; } Table Color We can specify using CSS the color of the borders, and the text and background color of elements. Example table, td, th {border: 1px solid green;} th {background-color: green; color: white;} Lesson# 40 – CSS Box Model Learning objectives After completing this topic, a student will be able to: • Describe CSS Box Model CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements and it consists of: margins, borders, padding, and the actual content. The box model allows us to add a border around elements, and to define space between elements. The image below illustrates the box model: Explanation of the different parts of the box model: Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent Lesson# 41 – CSS Border and Outline Learning objectives After completing this topic, a student will be able to: • Use CSS Border and Outline properties Border properties The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change − • The border-color specifies the color of a border. • The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values. • The border-width specifies the width of a border. CSS - Outlines An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". In CSS, the outline properties specify the style, color, and width of an outline. Border-style property The border-style property specifies what kind of border to display. The following values are allowed: • dotted - Defines a dotted border • dashed - Defines a dashed border • solid - Defines a solid border • double - Defines a double border • groove - Defines a 3D grooved border. The effect depends on the border-color value • ridge - Defines a 3D ridged border. The effect depends on the border-color value • inset - Defines a 3D inset border. The effect depends on the border-color value • outset - Defines a 3D outset border. The effect depends on the border-color value • none - Defines no border • hidden - Defines a hidden border Border - Individual sides In CSS, it is possible to specify different borders for different sides. Example p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } Border - Shorthand property The border property is shorthand for the following individual border properties: • border-width • border-style (required) • border-color Example p {border: 5px solid red;} CSS Outline An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". CSS has the following outline properties: • outline-style • outline-color • outline-width • outline-offset • outline Lesson# 42 – CSS Margin and Padding Learning objectives After completing this topic, a student will be able to: • Use CSS Margin and Padding properties CSS Margin and Padding For margins, use the CSS margin properties. The CSS margin properties are used to create space around elements, outside of any defined borders. The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: • margin-top • margin-right • margin-bottom • margin-left All the margin properties can have the following values: • auto - the browser calculates the margin • length - specifies a margin in px, pt, cm, etc. • % - specifies a margin in % of the width of the containing element • inherit - specifies that the margin should be inherited from the parent element Margin - Shorthand Property To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the following individual margin properties: • margin-top • margin-right • margin-bottom • margin-left Example p{ margin: 25px 50px 75px 100px; } Padding - Individual Sides CSS has properties for specifying the padding for each side of an element: • padding-top • padding-right • padding-bottom • padding-left All the padding properties can have the following values: • length - specifies a padding in px, pt, cm, etc. • % - specifies a padding in % of the width of the containing element • inherit - specifies that the padding should be inherited from the parent element Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties: padding-top padding-right padding-bottom padding-left Example div { padding: 25px 50px 75px 100px; } Lesson# 43 – CSS - Dimension Learning objectives After completing this topic, a student will be able to: • Use CSS dimension properties CSS - Dimension You have seen the border that surrounds every box i.e. element, the padding that can appear inside each box and the margin that can go around them. In this topic we will learn how we can change the dimensions of boxes. The CSS dimension properties allow you to control the height and width of an element. We have the following properties that allow you to control the dimensions of a box. • The height property is used to set the height of an element. • The width property is used to set the width of an element. • The max-height property is used to set a maximum height of an element. • The min-height property is used to set the minimum height of an element. • The max-width property is used to set the maximum width of an element. • The min-width property is used to set the minimum width of an element. Lesson#44 – CSS Display Learning objectives After completing this topic, a student will be able to: • Use CSS display and visibility properties Description The display property affects the most basic presentation of an element, effectively classing the element as a certain type of element. The rendering of the element may depend heavily on its display type, and certain properties will only work on elements that have specific display values. The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. Hiding an Element - display: none or visibility: hidden Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However these two methods produce different results: Visibility: hidden hides an element, but it will still take up the same space as before. Example h1.hidden {visibility: hidden;} Display: none hides an element, and it will not take up any space. Example h1.hidden {display: none;} CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <li> <div> An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: <span> <a> Lesson#45 – CSS Positioning & Floats Learning objectives After completing this topic, a student will be able to: • Use CSS position properties Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. Positioning methods There are four different positioning methods. 1- Static 2- Fixed 3- Relative 4- Absolute Overlapping Elements When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element with greater stack order is always in front of an element with a lower stack order. Lesson# 46 – CSS Positioning & Floats Learning objectives After completing this topic, a student will be able to: • Use CSS float properties CSS Float The float property causes an element to be moved to one side of the parent element’s content area, which allows other content to flow around it. With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is often used with images, but it is also useful when working with layouts. How Elements Float? Elements are floated horizontally; this means that an element can only be floated left or right, not up or down. Possible Values • left − The element is floated to the left side of its parent element's content area. • right − The element is floated to the right side of its parent element's content area. • none − The element is not floated. CSS Syntax float: none|left|right|initial|inherit; Floating Elements Next to Each Other If you place several floating elements after each other, they will float next to each other if there is room. Turning off Float - Using Clear Elements after the floating element will flow around it. To avoid this, use the clear property. Lesson# 47 – CSS Align Learning objectives After completing this topic, a student will be able to: • Align HTML elements CSS Align Using several CSS properties, we can align HTML elements. Most HTML elements are defined as block level elements or inline elements. Block level elements normally start (and end) with a new line, when displayed in a browser. Inline elements are normally displayed without line breaks. Examples of block elements: • <h1> • <p> • <div> Examples of inline elements: • <b> • <a> • <img> Center Aligning Using the margin Property Block elements can be center-aligned by setting the left and right margins to "auto". Left and Right Aligning Using the position Property One method of aligning elements is to use absolute positioning. Left and Right Aligning Using the float Property One method of aligning elements is to use the float property. Lesson# 48 – CSS Combinators Learning objectives After completing this topic, a student will be able to: • Use CSS Combinators CSS combinators CSS combinators are explaining the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purpose. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators. There are four types of combinators available in CSS: • General Sibling selector (~) • Adjecant Sibling selector (+) • Child selector (>) • Descendant selector (space) Descendant Selector The descendant selector matches all elements that are descendants of a specified element. Example div p { background-color: yellow; } Child Selector The child selector selects all elements that are the immediate children of a specified element. Example div > p { background-color: yellow; } Adjacent Sibling Selector The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Example This code selects the <p> elements that are placed immediately after <div> elements: div + p { background-color: yellow; } General Sibling Selector The general sibling selector selects all elements that are siblings of a specified element. Example The example code given below selects all <p> elements that are siblings of <div> elements: div ~ p { background-color: yellow; } Lesson#49 – CSS Pseudo-Class Learning objectives After completing this topic, a student will be able to: • Use CSS Pseudo-Class CSS Pseudo-Class A pseudo-class is used to define a special state of an element. CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. For example, it can be used to: • Style an element when a user mouses over it • Style visited and unvisited links differently • Style an element when it gets focus Anchor Pseudo-classes Links can be displayed in different ways: Example /* unvisited link */ a:link { color: #FF0000;} /* visited link */ a:visited { color: #00FF00;} /* mouse over link */ a:hover { color: #FF00FF;} /* selected link */ a:active {color: #0000FF;} Pseudo-classes and CSS Classes Pseudo-classes can be combined with CSS classes. Example a.highlight:hover { color: #ff0000; } CSS - The :first-child Pseudo-class The :first-child pseudo-class matches a specified element that is the first child of another element. Example p:first-child { color: blue; } The selector matches any <p> element that is the first child of any element. The :lang Pseudo-class The :lang pseudo-class allows you to define special rules for different languages. What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. The syntax of pseudo-elements: selector::pseudo-element { property:value;} Lesson# 50 – CSS Pseudo-Element Learning objectives After completing this topic, a student will be able to: • Use CSS Pseudo-Element What is CSS pseudo-element A CSS pseudo-element is used to style specified parts of an element. CSS pseudoelements are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. For example, it can be used to: • Style the first letter, or line, of an element • Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements: selector::pseudo-element { property:value; } The ::first-line Pseudo-element The ::first-line pseudo-element is used to add a special style to the first line of a text. Example p::first-line { color: #ff0000; font-variant: small-caps;} Note: The ::first-line pseudo-element can only be applied to block-level elements. The ::first-letter Pseudo-element The ::first-letter pseudo-element is used to add a special style to the first letter of a text. The ::first-letter pseudo-element can only be applied to block elements. Example p::first-letter { color: #ff0000; font-size: xx-large; } Pseudo-elements and CSS Classes Pseudo-elements can be combined with CSS classes. Example p.intro::first-letter { color: #ff0000; font-size:200%; } CSS - The ::before Pseudo-element The ::before pseudo-element can be used to insert some content before the content of an element. CSS - The ::after Pseudo-element The ::after pseudo-element can be used to insert some content after the content of an element. CSS - The ::selection Pseudo-element The ::selection pseudo-element matches the portion of an element that is selected by a user. Lesson# 51 – CSS Class Learning objectives After completing this topic, a student will be able to: • Use CSS Class selector CSS Classes CSS classes are set of styling rules that can be applied or assigned to the HTML entity using it’s class attribute and all the HTML elements having that class assigned will be assigned the styling as per the definition of the defined CSS class. The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. CSS Syntax .class { css declarations; } Example 1 Style all <p> elements with class="hometown": p.hometown { background-color: yellow; } Example 2 You can also specify that only specific HTML elements should be affected by a class. See the example code below: p.imp {color:blue; font-size:14px} <div class="imp"> … </div> <span class="imp"> … </span> <p class="imp"> … </p> Lesson# 52 – CSS Navigation Menu Learning objectives After completing this topic, a student will be able to: • Implement CSS Navigation Menu Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. Navigation Bar = List of Links • A navigation bar needs standard HTML as a base. • Here we will build the navigation bar from a standard HTML list. • A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense. Navigation bar example <ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> Now let's remove the bullets and the margins and padding from the list ul { list-style-type: none; margin: 0; padding: 0;} Vertical Navigation Bar To build a vertical navigation bar we only need to style the elements, in addition to the code we have. a {display: block; width: 60px;} Horizontal Navigation Bar There are two ways to create a horizontal navigation bar. Using inline or floating list items. Using inline One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code we have: li {display: inline; } Floating List Items Here links have different widths. For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements. li {float: left; } a { display: block; width: 60px; } Lesson# 53 – CSS Image Opacity Learning objectives After completing this topic, a student will be able to: • Implement opacity on images CSS Image Opacity / Transparency Creating transparent images with CSS is easy. The CSS opacity property is a part of the CSS3 recommendation. The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. CSS Syntax opacity: number|initial|inherit; Creating a Transparent Image Example img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } Transparent Hover Effect The opacity property is often used together with the :hover selector to change the opacity on mouse-over: Example img { opacity: 0.5;} img:hover {opacity: 1.0;} Lesson# 54 – CSS Image Sprites Learning objectives After completing this topic, a student will be able to: • Use Image Sprites What is CSS Image Sprite? CSS Image Sprite is a combined image file of all pictures in a document page. Image sprites come in useful as image resources will have to be loaded only once. Using the CSS background-position different parts of the combined image can be shown. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Image Sprites - Simple Example Instead of using three separate images, we use this single image ("img_navsprites.gif"): With CSS, we can show just the part of the image we need. In the following example the CSS specifies which part of the "img_navsprites.gif" image to show: Example Code <!DOCTYPE html><html><head> <style> #home {width: 46px;height: 44px; background: url(img_navsprites.gif) 0 0;} #next {width: 43px;height: 44px; background: url(img_navsprites.gif) -91px 0; } Out Put </style></head> <body> <img id="home" src="img_trans.gif" width="1" height="1"> <img id="next" src="img_trans.gif" width="1" height="1"> </body> </html> Example explained: <img id="home" src="img_trans.gif"> - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS width: 46px; height: 44px; - Defines the portion of the image we want to use background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px) Image Sprites - Hover Effect Now we want to add a hover effect with Image sprites. Code Out Put <!DOCTYPE html><html><head> Normal <style> #home {width: 46px;height: 44px; background: url(img_navsprites.gif) 0 0; Mouse Over } #home:hover{ background: url('img_navsprites_hover.gif') 0 -45px; } </style></head> <body> <img id="home" src="img_trans.gif" width="1" height="1"> </body> </html> Lesson# 55– CSS Media Types Learning objectives After completing this topic, a student will be able to: • Use CSS media types CSS Media Types One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. Certain CSS properties are only designed for certain media. On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the 'font-size' property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types. The @media Rule The @media rule makes it possible to define different style rules for different media types in the same stylesheet. It is usually followed by a comma-separated list of media types and the CSS declarations block containing the styles rules for target media. Example The style declaration in the example below tells the browser to display body content in 14 pixels Arial font on the screen, but in case of printing it will be in a 12 points Times font. However, the value of line-height property is set to 1.2 for both of them: @media screen{ body { color: #32cd32; font-family: Arial, sans-serif; font-size: 14px;} } @media print { body { color: #ff6347; font-family: Times, serif; font-size: 12pt;} } @media screen, print { body {line-height: 1.2;} } Lesson# 56– CSS Attribute Selectors Learning objectives After completing this topic, a student will be able to: • Use CSS Attribute Selectors CSS attribute selectors As you know from your study of HTML, elements can have attributes that give further detail about the element being marked up. In CSS you can use attribute selectors to target elements with certain attributes. The CSS attribute selectors provides an easy and powerful way to apply the styles on HTML elements based on the presence of a particular attribute or attribute value. CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute. Example selects all <a> elements with a target attribute a[target] { background-color: yellow; } CSS [attribute=value] Selector The [attribute=value] selector is used to select elements with a specified attribute and value. Example a[target="_blank"] { background-color: yellow; } CSS [attribute~=value] Selector The [attribute~=value] selector is used to select elements with an attribute value containing a specified word. Example [title~="flower"] { border: 5px solid yellow; } CSS [attribute|=value] Selector The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value. Example [class|="top"] { background: yellow; } Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"! CSS [attribute^=value] Selector The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value. Example [class^="top"] {background: yellow; } CSS [attribute$=value] Selector The [attribute$=value] selector is used to select elements whose attribute value ends with a specified value. Example [class$="test"] { background: yellow; } CSS [attribute*=value] Selector The [attribute*=value] selector is used to select elements whose attribute value contains a specified value. Example [class*="te"] { background: yellow; } Lesson# 57 – Fundamental of JavaScript Learning objectives After completing this topic, a student will be able to: • Change HTML Content using JavaScript • Change HTML Attributes using JavaScript • Validate data using JavaScript What is JavaScript JavaScript is the programming language of HTML and the Web. It is a small and lightweight language. JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities. JavaScript is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. Why to Learn JavaScript • JavaScript is the most popular programming language in the world and that makes it a programmer’s great choice. • JavaScript is everywhere, it comes installed on every modern web browser and so to learn JavaScript you really do not need any special environment setup. • JavaScript usage has now extended to mobile app development, desktop app development, and game development. • Due to high demand, there is tons of job growth and high pay for those who know JavaScript. Hello World Example JavaScript programs can be inserted almost anywhere into an HTML document using the <script> tag. Code <!DOCTYP E HTML> <html> <body> <p>Befor e the script...</ p> Result <script> alert( 'Hello, world!' ); </script> <p>...Aft er the script.</p > </body> </html> getElementById() Method The getElementById() method returns the element that has the ID attribute with the specified value. Syntax document.getElementById(elementID) Example change style of an element Code <!DOCTYPE html> <html> <body> <p id="demo">Click the button to change the color of this paragraph.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { Result var x = document.getElementById("demo"); x.style.color = "red"; } </script> </body> </html> What is onclick event? The onclick event occurs when the user clicks on an element. Example Explained In above example when a user clicks the button then a function “myFunction” is called. Inside this function the element with id=”demo” is returned which is a paragraph, in variable x using document.getElementById("demo"); method. And after that color of this element is changed to red. Lesson# 58 – JavaScript Syntax Learning objectives After completing this topic, a student will be able to: • Describe JavaScript Syntax HTML <script> Tag JavaScript can be implemented using JavaScript statements that are placed within the <script>... </script> HTML tags in a web page. You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tags. The <script> tag alerts the browser program to start interpreting all the text between these tags as a script. A simple syntax of your JavaScript will appear as follows. <script> JavaScript code </script> Script statements are separated by semicolon. Example var x = 5; var y = 6; JavaScript Syntax JavaScript statements are composed of Values, Operators, Expressions, Keywords, and Comments. The JavaScript syntax defines two types of values which are Fixed values and Variable values. Fixed values are called literals. Variable values are called variables. The most important rules for writing fixed values are, Numbers are written with or without decimals and Strings are text, written within double or single quotes. JavaScript uses the var keyword to define variables. An equal sign is used to assign values to variables. JavaScript uses an assignment operator (=) to assign values to variables. JavaScript keywords are used to identify actions to be performed. Code after double slashes // or between /* and */ is treated as a comment. Comments are ignored, and will not be executed. All JavaScript identifiers are case sensitive. The variables lastName and lastname, are two different variables. JavaScript programmers tend to use camel case that starts with a lowercase letter: firstName, lastName, masterCard, interCity. JavaScript uses the Unicode character set. Lesson# 59 – JavaScript Statements Learning objectives After completing this topic, a student will be able to: • Write JavaScript Statements Statements A computer program is a list of "instructions" to be "executed" by a computer. In a programming language, these programming instructions are called statements. JavaScript Statements In JavaScript, a statement tells the browser what to do. The statements are executed, one by one, in the same order as they are written. Most JavaScript programs contain many JavaScript statements. Here is a JavaScript Statement: document.getElementById("demo").innerHTML = “Hi, Everyone."; Explanation: This statement tells the browser to write "Hi, Everyone." inside an HTML element with id="demo". Semicolons in JavaScript separate JavaScript statements. Add a semicolon at the end of each executable statement. JavaScript ignores multiple spaces. For best readability, programmers often like to avoid code lines longer than 80 characters. If a JavaScript statement does not fit on one line, the best place to break it is after an operator. JavaScript statements can be grouped together in code blocks, inside curly brackets {...}. The purpose of code blocks is to define statements to be executed together. Lesson# 60 – JavaScript Comments Learning objectives After completing this topic, a student will be able to: • Use JavaScript Comments JavaScript comments In computer programming, a comment is a programmer-readable explanation or annotation in the source code of a computer program. They are added with the purpose of making the source code easier for humans to understand, and are generally ignored by compilers and interpreters. JavaScript comments can be used to explain JavaScript code, and to make it more readable. Furthermore, you can also use the JS comments to prevent execution, when testing alternative code. Single line comments Single line comments start with //. Any text between // and the end of the line, will be ignored by JavaScript (will not be executed). Example // Change heading: document.getElementById("myH").innerHTML = "My First Page"; // Change paragraph: document.getElementById("myP").innerHTML = "My first paragraph."; Multi-line Comments Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript. Example <!DOCTYPE html> <html><body> <h1 id="myH"></h1> <p id="myP"></p> <script> /* The code below will change the heading with id = "myH" and the paragraph with id = "myP" */ document.getElementById("myH").innerHTML = "JavaScript Comments"; document.getElementById("myP").innerHTML = "My first paragraph."; </script> </body></html> Using Comments to Prevent Execution Adding // in front of a code line changes the code lines from an executable line to a comment. Lesson# 61 – JavaScript Variables & Operators Learning objectives After completing this topic, a student will be able to: • Declare and use JavaScript Variables JavaScript variables Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container. Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword. Example In the example, given below, x, y, and z, are variables: var x = 5; var y = 6; var z = x + y; JavaScript Datatypes One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the type of values that can be represented and manipulated in a programming language. JavaScript variables can hold numbers like 100, and text values like "John Doe". Strings are written inside double or single quotes. Numbers are written without quotes. Example var pi = 3.14; var person = "John Doe"; JavaScript Identifiers • Names can contain letters, digits, underscores, and dollar signs. • Names must begin with a letter • Names can also begin with $ and _ • Names are case sensitive (y and Y are different variables) • Reserved words (like JavaScript keywords) cannot be used as names The Assignment Operator In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator. One Statement, Many Variables You can declare many variables in one statement. Start the statement with var and separate the variables by comma: Example var person = "John Doe", carName = "Volvo", price = 200; Lesson# 62 – JavaScript Variables & Operators Learning objectives After completing this topic, a student will be able to: • Use JavaScript Operators JavaScript operators JavaScript includes operators same as other languages. An operator performs some operation on single or multiple operands (data value) and produces a result. For example, in 1 + 2, the + sign is an operator and 1 is left side operand and 2 is right side operand. The + operator performs the addition of two numeric values and returns a result. JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic operations on numbers: Operator Description + Addition - Subtraction * Multiplication ** Exponentiation / Division % Modulus (Division Remainder) ++ Increment -- Decrement JavaScript Assignment Operators Assignment operators assign values to JavaScript variables. Operator Example Same As = x=y x=y += x += y x=x+y -= x -= y x=x-y *= x *= y x=x*y /= x /= y x=x/y %= x %= y x=x%y **= x **= y x = x ** y JavaScript String Operators The + operator can also be used to add (concatenate) strings. The += assignment operator can also be used to add (concatenate) strings. JavaScript Comparison Operators Operator Description == equal to === equal value and equal type != not equal !== not equal value or not equal type > greater than < less than >= greater than or equal to <= less than or equal to ? ternary operator JavaScript Logical Operators Operator Description && logical and || logical or ! logical not Lesson# 63 – JavaScript Functions Learning objectives After completing this topic, a student will be able to: • Write JavaScript Functions JavaScript Functions A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing the same code again and again. It helps programmers in writing modular codes. Functions allow a programmer to divide a big program into a number of small and manageable functions. Like any other advanced programming language, JavaScript also supports all the features necessary to write modular code using functions. A JavaScript function is a block of code designed to perform a particular task. The function is executed when "something" invokes it (calls it). JavaScript Function Syntax A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: {} Example function name (parameter1, parameter2, parameter3) { // code to be executed } Function parameters are listed inside the parentheses () in the function definition. Function arguments are the values received by the function when it is invoked. Inside the function, the arguments (the parameters) behave as local variables. Function Example Calculate the product of two numbers, and return the result: Code Result <!DOCTYPE html> <html><body> <h2>JavaScript Functions</h2> <p>This example calls a function which performs a calculation and returns the result:</p> <p id="demo"></p> <script> var x = myFunction(4, 3); document.getElementById("dem o").innerHTML = x; function myFunction(a, b) { return a * b; } </script> </body></html> Lesson# 64 – JavaScript Objects Learning objectives After completing this topic, a student will be able to: • Define and use JavaScript Objects Objects in JavaScript Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood with real life, tangible objects. In JavaScript, an object is a standalone entity, with properties and methods. In real life, a car is an object. A car has properties like weight and color, and methods like start and stop. You have already learned that JavaScript variables are containers for data values. Objects are variables too. But objects can contain many values. Object Definition You define (and create) a JavaScript object with an object literal: Example var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; Object Properties The name:values pairs in JavaScript objects are called properties. Example var person = {firstName: "John",lastName: "Doe",age: 50, eyeColor: "blue"}; in above example Property Property Value firstName John lastName Doe age 50 eyeColor blue Accessing Object Properties You can access object properties in two ways: objectName.propertyName or objectName["propertyName"] Object Methods Objects can also have methods. Methods are actions that can be performed on objects. Methods are stored in properties as function definitions. Example var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; Accessing Object Methods You can access an object method with the following syntax: objectName.methodName() Example name = person.fullName(); “New” keyword When a JavaScript variable is declared with the keyword "new", the variable is created as an object. Lesson# 65 – JavaScript Scope Learning objectives After completing this topic, a student will be able to: • Define JavaScript scope • Differentiate between Local JavaScript Variables and Global JavaScript Variables Scope Scope is the area of the program where an item (be it variable, constant, function, etc.) that has an identifier name is recognized. Local JavaScript Variables Variables declared within a JavaScript function, become LOCAL to the function. They can only be accessed within the function. Local variables are created when a function starts, and deleted when the function is completed. Global JavaScript Variables A variable declared outside a function, becomes GLOBAL. A global variable has global scope. All scripts and functions on a web page can access it. Lesson# 66 – JavaScript Events Learning objectives After completing this topic, a student will be able to: • Implement Event Handling in JavaScript JavaScript Events JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable. Example Event Handling in JavaScript Code Out Put <!DOCTYPE html> <html> <body> <button onclick="aler t('Hello World')">Click me</button> </body> </html> On Click event of button Here is a list of some common HTML events: Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page Lesson# 67 – JavaScript Strings Learning objectives After completing this topic, a student will be able to: • Use JavaScript Strings JavaScript Strings A JavaScript string stores a series of characters like "John Doe". A string can be any text inside double or single quotes. JavaScript strings are used for storing and manipulating text. Example: String literal "Hello World" 'Hello World' String value can be assigned to a variable using equal to (=) operator. Example: String literal assigned to a variable var str1 = "Hello World"; var str2 = 'Hello World'; Lesson# 68 – JavaScript Numbers Learning objectives After completing this topic, a student will be able to: • Use JavaScript numbers JavaScript Numbers JavaScript has only one type of number (and that is 64 Bit). Numbers can be written with or without decimals. Example var x = 34.00; // A number with decimals var y = 34; // A number without decimals Furthermore, extra-large or extra small numbers can be written with scientific (exponent) notation: Example var x = 123e5; // 12300000 var y = 123e-5; // 0.00123 Unlike many other programming languages, JavaScript does not define different types of numbers, like integers, short, long, floating-point etc. JavaScript numbers are always stored as double precision floating point numbers. Number Properties The following table lists the standard properties of the Number object. Property Description MIN_SAFE_INTEGER Represents the maximum safe integer in JavaScript (253 - 1). MAX_VALUE Returns the largest numeric value representable in JavaScript, approximately 1.79E+308. Values larger than MAX_VALUE are represented as Infinity. MIN_SAFE_INTEGER Represents the minimum safe integer in JavaScript (-(253 1)). MIN_VALUE Returns the smallest positive numeric value representable in JavaScript, approximately 5e-324. It is closest to 0, not the most negative number. Values smaller than MIN_VALUE are converted to 0. NEGATIVE_INFINITY Represents the negative infinity value. NaN Represents "Not-A-Number" value. POSITIVE_INFINITY Represents the infinity value. prototype Allows you to add new properties and methods to a Number object. Lesson# 69 – JavaScript Number Methods Learning objectives After completing this topic, a student will be able to: • Use JavaScript Number Methods JavaScript Number Methods JavaScript number methods are methods that can be used on numbers. In JavaScript, all number methods return a new value. They do not change the original variable. Here are a few methods that can make manipulating and modifying numeric values much easier. Number() The Number() method converts a string into a number. parseInt() parseInt() very similar to the number() method, parseInt() formats a string into an integer. parseFloat() The parseFloat() method parses a string value and returns the number with its decimal value. toString() The toString() method converts a numeric value into a string. The toExponential() Method toExponential() returns a string, with a number rounded and written using exponential notation. The toFixed() Method toFixed() returns a string, with the number written with a specified number of decimals The toPrecision() Method toPrecision() returns a string, with a number written with a specified length The valueOf() Method valueOf() returns a number as a number Lesson# 70 – JavaScript Math Learning objectives After completing this topic, a student will be able to: • Use JavaScript math object JavaScript Math The math object provides you properties and methods for mathematical constants and functions. Unlike other global objects, Math object has no constructor. All the properties and methods of Math are static and can be called by using Math as an object without creating it. Thus, you refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument. Syntax The syntax to call the properties and methods of Math are as follows: var pi_val = Math.PI; var sine_val = Math.sin(30); Math Properties (Constants) Math.E // returns Euler's number Math.PI // returns PI Math.SQRT2 // returns the square root of 2 Math.SQRT1_2 // returns the square root of 1/2 Math.LN2 // returns the natural logarithm of 2 Math.LN10 // returns the natural logarithm of 10 Math.LOG2E // returns base 2 logarithm of E Math.LOG10E // returns base 10 logarithm of E Code <!DOCTYPE html> <html> <body> <h2>JavaScript Math Constants</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTM L= "<p><b>Math.E:</b> " + Math.E + "</p>" + "<p><b>Math.PI:</b> " + Math.PI + "</p>" + "<p><b>Math.SQRT2:</b> " + Math.SQRT2 + "</p>" + "<p><b>Math.SQRT1_2:</b> " + Math.SQRT1_2 + "</p>" + "<p><b>Math.LN2:</b> " + Math.LN2 + "</p>" + "<p><b>Math.LN10:</b> " + Math.LN10 + "</p>" + "<p><b>Math.LOG2E:</b> " + Math.LOG2E + "</p>" + "<p><b>Math.Log10E:</b> " + Math.LOG10E + "</p>"; </script> </body> </html> Math Object Methods Out Put Method Description abs(x) Returns the absolute value of x acos(x) Returns the arccosine of x, in radians acosh(x) Returns the hyperbolic arccosine of x asin(x) Returns the arcsine of x, in radians asinh(x) Returns the hyperbolic arcsine of x atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians atan2(y, x) Returns the arctangent of the quotient of its arguments atanh(x) Returns the hyperbolic arctangent of x cbrt(x) Returns the cubic root of x ceil(x) Returns x, rounded upwards to the nearest integer cos(x) Returns the cosine of x (x is in radians) cosh(x) Returns the hyperbolic cosine of x exp(x) Returns the value of Ex floor(x) Returns x, rounded downwards to the nearest integer log(x) Returns the natural logarithm (base E) of x max(x, y, z, ..., n) Returns the number with the highest value min(x, y, z, ..., n) Returns the number with the lowest value pow(x, y) Returns the value of x to the power of y random() Returns a random number between 0 and 1 round(x) Rounds x to the nearest integer sign(x) Returns if x is negative, null or positive (-1, 0, 1) sin(x) Returns the sine of x (x is in radians) sinh(x) Returns the hyperbolic sine of x sqrt(x) Returns the square root of x tan(x) Returns the tangent of an angle tanh(x) Returns the hyperbolic tangent of a number trunc(x) Returns the integer part of a number (x) Lesson# 71 – JavaScript Date Learning objectives After completing this topic, a student will be able to: • Use JavaScript Date object JavaScript Date The Date object is a datatype built into the JavaScript language. Date objects are created with the new Date( ). Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time. There are different ways of instantiating a date for example: var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); Lesson# 72 – JavaScript Date Learning objectives After completing this topic, a student will be able to: • Use different Date formats • Use different methods of Date object Date Object Methods Method Description getDate() Returns the day of the month (from 1-31) getDay() Returns the day of the week (from 0-6) getFullYear() Returns the year getHours() Returns the hour (from 0-23) getMilliseconds() Returns the milliseconds (from 0-999) getMinutes() Returns the minutes (from 0-59) getMonth() Returns the month (from 0-11) getSeconds() Returns the seconds (from 0-59) getTime() Returns the number of milliseconds since midnight Jan 1 1970, and a specified date getTimezoneOffset() Returns the time difference between UTC time and local time, in minutes getUTCDate() Returns the day of the month, according to universal time (from 1-31) getUTCDay() Returns the day of the week, according to universal time (from 0-6) getUTCFullYear() Returns the year, according to universal time getUTCHours() Returns the hour, according to universal time (from 0-23) getUTCMilliseconds() Returns the milliseconds, according to universal time (from 0-999) getUTCMinutes() Returns the minutes, according to universal time (from 0-59) getUTCMonth() Returns the month, according to universal time (from 0-11) getUTCSeconds() Returns the seconds, according to universal time (from 0-59) getYear() Deprecated. Use the getFullYear() method instead now() Returns the number of milliseconds since midnight Jan 1, 1970 parse() Parses a date string and returns the number of milliseconds since January 1, 1970 setDate() Sets the day of the month of a date object setFullYear() Sets the year of a date object setHours() Sets the hour of a date object setMilliseconds() Sets the milliseconds of a date object setMinutes() Set the minutes of a date object setMonth() Sets the month of a date object setSeconds() Sets the seconds of a date object setTime() Sets a date to a specified number of milliseconds after/before January 1, 1970 setUTCDate() Sets the day of the month of a date object, according to universal time setUTCFullYear() Sets the year of a date object, according to universal time setUTCHours() Sets the hour of a date object, according to universal time setUTCMilliseconds() Sets the milliseconds of a date object, according to universal time setUTCMinutes() Set the minutes of a date object, according to universal time setUTCMonth() Sets the month of a date object, according to universal time setUTCSeconds() Set the seconds of a date object, according to universal time setYear() Deprecated. Use the setFullYear() method instead toDateString() Converts the date portion of a Date object into a readable string toGMTString() Deprecated. Use the toUTCString() method instead toISOString() Returns the date as a string, using the ISO standard toJSON() Returns the date as a string, formatted as a JSON date toLocaleDateString() Returns the date portion of a Date object as a string, using locale conventions toLocaleTimeString() Returns the time portion of a Date object as a string, using locale conventions toLocaleString() Converts a Date object to a string, using locale conventions toString() Converts a Date object to a string toTimeString() Converts the time portion of a Date object to a string toUTCString() Converts a Date object to a string, according to universal time UTC() Returns the number of milliseconds in a date since midnight of January 1, 1970, according to UTC time valueOf() Returns the primitive value of a Date object Lesson# 73 – JavaScript Arrays Learning objectives After completing this topic, a student will be able to: • Use JavaScript Arrays JavaScript Arrays In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index. JavaScript array has the following characteristics: 1. First, an array can hold values of different types. For example, you can have an array that stores the number and string, and boolean values. 2. Second, the length of an array is dynamically sized and auto-growing. In other words, you don’t need to specify the array size upfront. Creating an Array Example Code OutPut <!DOCTYPE html> <html> <body> <h2>JavaScript Arrays</h2> <p id="demo"></p> <script> var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars; </script> </body> </html> Using the JavaScript Keyword new The following example also creates an Array, and assigns values to it: Code Out Put <!DOCTYPE html> <html> <body> <h2>JavaScript Arrays</h2> <p id="demo"></p> <script> var cars = new Array("Saab", "Volvo", "BMW"); document.getElementById("demo").innerHTML = cars; </script> </body> </html> Access the Elements of an Array: You can refer to an array element by referring to the index number. Code <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars[0]; </script> </body> </html> Out Put Access the Full Array With JavaScript, the full array can be accessed by referring to the array name. The length Property The length property of an array returns the length of an array (the number of array elements). Example var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.length; // Returns 4

Front-End Development Introduction: HTML, CSS, JavaScript

Related documents

Products

Support

Front-End Development Introduction: HTML, CSS, JavaScript

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib