The document discusses different ways to add style sheets to web pages:
1. External style sheets define styles in a separate .css file linked via a <LINK> tag.
2. Internal style sheets define styles between <STYLE> tags in the <HEAD>.
3. Inline styles directly set style attributes on tags. Styles cascade from inline to internal to external.
The examples demonstrate adding external, internal, and inline style sheets to style text, tables, and format a web page consistently without repeating styles.
HTML uses markup tags to describe web pages. Common tags include <p> for paragraphs, <h1>-<h6> for headings, <img> for images, and <table> for tables. Lists can be ordered (<ol>), unordered (<ul>), or definitions (<dl>). Forms (<form>) contain elements like text fields and buttons to collect user input.
Hey friends,
This is the Basic HTML programs very Good for the html beginners i share with you .for more query contact my e-mail address abhi.smarta02@gmail.com
The document provides an introduction to HTML basics including text, images, tables and forms. It covers the structure of an HTML document with the <head> and <body> sections. It describes common tags for headings, paragraphs, hyperlinks and images. It also discusses attributes, comments, and different ways to style and format text in HTML. The document is intended to teach HTML fundamentals.
The document contains 9 programs demonstrating various HTML and JavaScript concepts. Program 1 creates a table with rowspan and columnspan. Program 2 implements unordered, ordered, and definition lists. Program 3 creates a college registration form. Program 4 creates 4 frames to display images. Program 5 creates a login page with form validation. Program 6 loads an image uploaded by the user. Program 7 demonstrates the onload event. Program 8 inserts a node and attribute to the DOM. Program 9 uses regular expressions to replace text in a paragraph.
The document provides an introduction to HTML basics, including:
- How the web works using a client-server model with HTTP as the request-response protocol.
- The structure of an HTML page, which contains text marked up with tags to describe its semantic structure and formatting.
- The main sections of an HTML document - the <head> for metadata and <body> for visible content. The <head> includes the <title> and can contain <meta>, <script>, <style> tags.
- Common text formatting tags like <b>, <i>, <em>, headings like <h1>-<h6>, and block elements like <p> and <div>.
The document provides an introduction to HTML basics, including:
- HTML uses a client-server architecture with HTTP to deliver web pages as text files containing HTML tags
- HTML tags provide semantic structure and formatting for web page content, with opening and closing tags wrapping elements like paragraphs, headings, and images
- Simple HTML pages can be created with a text editor and include the basic <html>, <head>, <body> structure along with common text and image elements
This document provides an introduction to HTML basics including document structure, tags, elements, and common text formatting elements. It discusses the structure of an HTML document with the <head> and <body> sections. The <head> section contains metadata about the page like the <title>. The <body> contains the visible page content and supports headings, paragraphs, and divisions. It also covers basic text formatting tags and provides code examples to demonstrate HTML pages.
This document provides an introduction to HTML document structure and formatting. It discusses the basic structure of an HTML document including the <!DOCTYPE>, <head>, and <body> sections. It also covers common text formatting tags such as <b>, <i>, <u> and others. The document uses examples to demonstrate how to properly structure an HTML document and apply basic formatting tags.
HTML uses markup tags to describe web pages. Common tags include <p> for paragraphs, <h1>-<h6> for headings, <img> for images, and <table> for tables. Lists can be ordered (<ol>), unordered (<ul>), or definitions (<dl>). Forms (<form>) contain elements like text fields and buttons to collect user input.
Hey friends,
This is the Basic HTML programs very Good for the html beginners i share with you .for more query contact my e-mail address abhi.smarta02@gmail.com
The document provides an introduction to HTML basics including text, images, tables and forms. It covers the structure of an HTML document with the <head> and <body> sections. It describes common tags for headings, paragraphs, hyperlinks and images. It also discusses attributes, comments, and different ways to style and format text in HTML. The document is intended to teach HTML fundamentals.
The document contains 9 programs demonstrating various HTML and JavaScript concepts. Program 1 creates a table with rowspan and columnspan. Program 2 implements unordered, ordered, and definition lists. Program 3 creates a college registration form. Program 4 creates 4 frames to display images. Program 5 creates a login page with form validation. Program 6 loads an image uploaded by the user. Program 7 demonstrates the onload event. Program 8 inserts a node and attribute to the DOM. Program 9 uses regular expressions to replace text in a paragraph.
The document provides an introduction to HTML basics, including:
- How the web works using a client-server model with HTTP as the request-response protocol.
- The structure of an HTML page, which contains text marked up with tags to describe its semantic structure and formatting.
- The main sections of an HTML document - the <head> for metadata and <body> for visible content. The <head> includes the <title> and can contain <meta>, <script>, <style> tags.
- Common text formatting tags like <b>, <i>, <em>, headings like <h1>-<h6>, and block elements like <p> and <div>.
The document provides an introduction to HTML basics, including:
- HTML uses a client-server architecture with HTTP to deliver web pages as text files containing HTML tags
- HTML tags provide semantic structure and formatting for web page content, with opening and closing tags wrapping elements like paragraphs, headings, and images
- Simple HTML pages can be created with a text editor and include the basic <html>, <head>, <body> structure along with common text and image elements
This document provides an introduction to HTML basics including document structure, tags, elements, and common text formatting elements. It discusses the structure of an HTML document with the <head> and <body> sections. The <head> section contains metadata about the page like the <title>. The <body> contains the visible page content and supports headings, paragraphs, and divisions. It also covers basic text formatting tags and provides code examples to demonstrate HTML pages.
This document provides an introduction to HTML document structure and formatting. It discusses the basic structure of an HTML document including the <!DOCTYPE>, <head>, and <body> sections. It also covers common text formatting tags such as <b>, <i>, <u> and others. The document uses examples to demonstrate how to properly structure an HTML document and apply basic formatting tags.
Los insectos y otros pequeños animales pueden resultar fascinantes para muchos niños. Aunque a veces dan miedo, explorar su mundo de cerca con la ayuda de un adulto puede ser una buena manera de aprender y desarrollar la curiosidad.
Digital literacy and competences as essential life skillsDeborahJane
This document discusses digital literacy and competencies as essential life skills. It highlights some of the challenges people face in determining who and what to trust online. It also discusses initiatives aimed at reducing digital literacy disparities and ensuring higher education prepares students for the digital age. Key issues discussed include critical thinking, trust, digital literacy, e-government, e-health, lifelong learning and citizenship.
The changing landscape, a personal view for OER WalesLis Parcell
Slide deck for a brief presentation given at the second of a series of workshops run by the OER Wales project to explore the development of a network of OER/open education practitioners. The workshop was held at University of Wales Trinity St David, Carmarthen on 20 November 2014.
A Sourcing and Recruiting Method that WorksAndrea Tanzi
We source and recruit human resources that work in relation to the Information Technology field. Our method of sourcing is very effective and we want to share our knowledge.
Frost sullivan windows case study final 12.20.10sbendt
The document discusses Microsoft's strategy for leveraging social media to engage brand enthusiasts in the launch of Windows 7. Key points:
- Microsoft established a dedicated social media team to develop and execute the strategy.
- The team identified and organized brand enthusiasts to support the launch. They rewarded enthusiasts' participation and provided tools to drive word-of-mouth.
- The social media-driven approach exceeded impressions goals by 140% and increased purchase consideration after the launch. Windows 7 reached 4% market share in one month.
Building advocacy and trust: social media for engagementLis Parcell
A slide deck used by myself and my Jisc RSC Wales colleague Esther Barrett to support our workshop at the Jisc Digital Festival 11-12 March 2014 in Birmingham, UK #digifest14. Apologies it is a pdf and not the full ppt with notes. This is due to a temporary fault on Slideshare. We'll load a version with notes as soon as we can!
Austria's wine industry suffered from scandals in 1985, 2006, and 2008 that negatively impacted its reputation abroad. A 1985 scandal involved the addition of diethylene glycol, a poisonous alcohol, to wines to make them appear more mature. This was devastating in the short term but in the long run led to more stringent regulations and higher quality wines as the industry aimed to rebuild trust. However, Austrian wines still remain relatively unknown outside the country.
Using Simulations to Evaluated the Effects of Recommender Systems for Learner...Hendrik Drachsler
The document discusses using simulations to research recommender systems in learning networks. It proposes simulating learner behavior in learning networks over long periods of time and large numbers of learners using an agent-based modeling environment. The simulation would test hypotheses about the effectiveness, efficiency, and dropout rates of treatment groups receiving personalized recommendations compared to a control group. Recommendation algorithms like user-based and item-based filtering would be evaluated based on metrics like accuracy, precision, and recall.
A new beach has opened in Japan. The beach has soft white sand and calm blue waters, making it a scenic spot for swimming, sunbathing and other beach activities. Visitors can enjoy the natural beauty of the beach while taking in ocean views.
The Peace Valley garter snake is a carnivore that eats small animals like frogs, salamanders, fish, toads, and bird eggs. It is preyed upon by larger snakes, birds like hawks and owls, frogs, turtles, and raccoons. It has black, brown, or tan coloring with a striped pattern and males are shorter and thinner than females at about 2 feet long. They live mainly near water in rocks, logs, and their skin is often found near rocks.
Birds of a Feather? - Do Participants’ Hierarchical Positions activate Homoph...Martin Rehm
This document summarizes a study that examined whether participants' hierarchical positions within an organization activated homophily (similarity) within online communities of learning (CoL). The study analyzed social networks of 249 participants in 25 CoL during a 14-week online training program. It found no evidence of homophily based on hierarchical position in the reading networks, but saw high fluctuation in active reply networks. The document recommends scaffolding activities and facilitator guidance to decrease selective interactions and more actively engage all participants.
UNIT 2.2 Web Programming HTML Basics - Benchmark standardIntan Jameel
The document discusses the basics of HTML and creating web pages. It outlines the structure of an HTML document which includes the head and body sections. The head section contains the page title and other metadata, while the body section contains the visible page content. It provides steps to create a basic HTML file, save it, create a virtual directory in IIS to host the file, and view it in a web browser. Errors in HTML code must be corrected by editing the source code file.
This presentation teaches how to browse and search the World Wide Web. A web page contains information as text, pictures, audio or video. A website is a collection of related web pages, with the first page called the home page. The World Wide Web (WWW) contains a huge collection of websites. Search engines like Google can be used to find web pages containing specific keywords. Operators like AND, OR and NOT allow searching by multiple keywords or excluding certain keywords. Hands-on exercises provide practice finding information on the internet about topics like universities, sports, programs of study and countries.
The document provides information on basic HTML elements and tags. It defines common tags like <html>, <head>, <title>, <body>, and <header>. It also describes tags for text formatting (<b>, <i>, <u>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>), tables (<table>, <tr>, <td>, <th>), and forms (<form>, <input>). The document also lists HTML attributes and provides examples of using tags for layout with <div> and applying stylesheets. In under 3 sentences, the document covers fundamental HTML tags and their uses for text, links, images, lists, tables, and forms.
This document provides an introduction to various web technologies including:
- Internet and World Wide Web which allows for interlinked hypertext documents accessed via HTTP.
- Client-server architecture which underlies how content is delivered on the web.
- HTML, CSS, JavaScript which are the core technologies used for building webpages, separating structure and presentation, and adding interactivity.
- Server-side technologies like PHP, ASP, and databases which power dynamic content and functionality on websites.
Los insectos y otros pequeños animales pueden resultar fascinantes para muchos niños. Aunque a veces dan miedo, explorar su mundo de cerca con la ayuda de un adulto puede ser una buena manera de aprender y desarrollar la curiosidad.
Digital literacy and competences as essential life skillsDeborahJane
This document discusses digital literacy and competencies as essential life skills. It highlights some of the challenges people face in determining who and what to trust online. It also discusses initiatives aimed at reducing digital literacy disparities and ensuring higher education prepares students for the digital age. Key issues discussed include critical thinking, trust, digital literacy, e-government, e-health, lifelong learning and citizenship.
The changing landscape, a personal view for OER WalesLis Parcell
Slide deck for a brief presentation given at the second of a series of workshops run by the OER Wales project to explore the development of a network of OER/open education practitioners. The workshop was held at University of Wales Trinity St David, Carmarthen on 20 November 2014.
A Sourcing and Recruiting Method that WorksAndrea Tanzi
We source and recruit human resources that work in relation to the Information Technology field. Our method of sourcing is very effective and we want to share our knowledge.
Frost sullivan windows case study final 12.20.10sbendt
The document discusses Microsoft's strategy for leveraging social media to engage brand enthusiasts in the launch of Windows 7. Key points:
- Microsoft established a dedicated social media team to develop and execute the strategy.
- The team identified and organized brand enthusiasts to support the launch. They rewarded enthusiasts' participation and provided tools to drive word-of-mouth.
- The social media-driven approach exceeded impressions goals by 140% and increased purchase consideration after the launch. Windows 7 reached 4% market share in one month.
Building advocacy and trust: social media for engagementLis Parcell
A slide deck used by myself and my Jisc RSC Wales colleague Esther Barrett to support our workshop at the Jisc Digital Festival 11-12 March 2014 in Birmingham, UK #digifest14. Apologies it is a pdf and not the full ppt with notes. This is due to a temporary fault on Slideshare. We'll load a version with notes as soon as we can!
Austria's wine industry suffered from scandals in 1985, 2006, and 2008 that negatively impacted its reputation abroad. A 1985 scandal involved the addition of diethylene glycol, a poisonous alcohol, to wines to make them appear more mature. This was devastating in the short term but in the long run led to more stringent regulations and higher quality wines as the industry aimed to rebuild trust. However, Austrian wines still remain relatively unknown outside the country.
Using Simulations to Evaluated the Effects of Recommender Systems for Learner...Hendrik Drachsler
The document discusses using simulations to research recommender systems in learning networks. It proposes simulating learner behavior in learning networks over long periods of time and large numbers of learners using an agent-based modeling environment. The simulation would test hypotheses about the effectiveness, efficiency, and dropout rates of treatment groups receiving personalized recommendations compared to a control group. Recommendation algorithms like user-based and item-based filtering would be evaluated based on metrics like accuracy, precision, and recall.
A new beach has opened in Japan. The beach has soft white sand and calm blue waters, making it a scenic spot for swimming, sunbathing and other beach activities. Visitors can enjoy the natural beauty of the beach while taking in ocean views.
The Peace Valley garter snake is a carnivore that eats small animals like frogs, salamanders, fish, toads, and bird eggs. It is preyed upon by larger snakes, birds like hawks and owls, frogs, turtles, and raccoons. It has black, brown, or tan coloring with a striped pattern and males are shorter and thinner than females at about 2 feet long. They live mainly near water in rocks, logs, and their skin is often found near rocks.
Birds of a Feather? - Do Participants’ Hierarchical Positions activate Homoph...Martin Rehm
This document summarizes a study that examined whether participants' hierarchical positions within an organization activated homophily (similarity) within online communities of learning (CoL). The study analyzed social networks of 249 participants in 25 CoL during a 14-week online training program. It found no evidence of homophily based on hierarchical position in the reading networks, but saw high fluctuation in active reply networks. The document recommends scaffolding activities and facilitator guidance to decrease selective interactions and more actively engage all participants.
UNIT 2.2 Web Programming HTML Basics - Benchmark standardIntan Jameel
The document discusses the basics of HTML and creating web pages. It outlines the structure of an HTML document which includes the head and body sections. The head section contains the page title and other metadata, while the body section contains the visible page content. It provides steps to create a basic HTML file, save it, create a virtual directory in IIS to host the file, and view it in a web browser. Errors in HTML code must be corrected by editing the source code file.
This presentation teaches how to browse and search the World Wide Web. A web page contains information as text, pictures, audio or video. A website is a collection of related web pages, with the first page called the home page. The World Wide Web (WWW) contains a huge collection of websites. Search engines like Google can be used to find web pages containing specific keywords. Operators like AND, OR and NOT allow searching by multiple keywords or excluding certain keywords. Hands-on exercises provide practice finding information on the internet about topics like universities, sports, programs of study and countries.
The document provides information on basic HTML elements and tags. It defines common tags like <html>, <head>, <title>, <body>, and <header>. It also describes tags for text formatting (<b>, <i>, <u>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>), tables (<table>, <tr>, <td>, <th>), and forms (<form>, <input>). The document also lists HTML attributes and provides examples of using tags for layout with <div> and applying stylesheets. In under 3 sentences, the document covers fundamental HTML tags and their uses for text, links, images, lists, tables, and forms.
This document provides an introduction to various web technologies including:
- Internet and World Wide Web which allows for interlinked hypertext documents accessed via HTTP.
- Client-server architecture which underlies how content is delivered on the web.
- HTML, CSS, JavaScript which are the core technologies used for building webpages, separating structure and presentation, and adding interactivity.
- Server-side technologies like PHP, ASP, and databases which power dynamic content and functionality on websites.
This document provides descriptions and examples of various HTML tags. It explains basic HTML structure using tags like <html>, <head>, <title>, <body>. It also provides examples of common text formatting tags like <b>, <i>, <u> and examples of lists, tables, forms and inputs using tags like <ul>, <ol>, <table>, <form>, <input>. It is intended as a reference for the basic tags used to structure and style HTML documents.
The document provides information about HTML (Hypertext Markup Language) including:
1. The structure of an HTML document includes a head and body section. The head contains metadata and the body contains the visible page content.
2. Basic HTML tags are used to structure and format text like headings, paragraphs, lists, links, and images. Attributes customize elements.
3. Tables, frames, forms, and image maps allow more advanced page layout and user input. Attributes further define elements.
This document provides an introduction and overview of HTML. It begins by explaining the differences between static and dynamic web pages. It then discusses the different layers of web design including structure, style, and behavior. The document goes on to define HTML and cover its objectives, advantages, and disadvantages. It provides examples of key HTML tags and elements for text formatting, lists, images, and tables.
The document discusses adding tables to web pages. It describes how to insert tables, add captions and headings, and format tables by adding borders. The key points are:
1) HTML tags like <TABLE>, <TR>, and <TD> are used to create tables and add rows and cells.
2) The <CAPTION> tag adds a caption to identify the table, while the <TH> tag formats column headings in bold.
3) The Border attribute of the <TABLE> tag sets the width of borders around the table.
The document provides an overview of HTML including:
1. It describes some basic HTML elements like lists, tables, images, forms and frames.
2. It explains some key HTML concepts such as tags, the structure of an HTML document, and how to format text.
3. It provides examples of how to create lists, tables, images and forms in HTML.
The document provides an overview of HTML including definitions of key terms like HTTP, browsers, and HTML. It describes the significance of HTML as a scripting language that is a subset of SGML and defines the layout and attributes of web documents. It also covers basic HTML elements and tags for text formatting, lists, tables, images, forms, frames, and cascading style sheets.
This document provides an overview of HTML (Hypertext Markup Language) by defining its main components and tags. It discusses the head and body sections that make up an HTML document and describes common text formatting tags like headings, paragraphs, lists and links. It also introduces images, tables, forms and CSS for styling HTML pages. The document contains examples of HTML tags and provides guidance on creating basic webpages.
Web design involves creating websites and encompasses webpage layout, content production, and graphic design. It uses client-side technologies like HTML, CSS, and JavaScript that only require a text editor and browser, as well as server-side languages like PHP, Java, and Python that require additional server programs. HTML is the core markup language that defines the structure and layout of a web page using elements like headings, paragraphs, lists, links, images, and tables. Frames allow dividing the browser window into independent sections to organize content. Forms are used to collect user input through elements such as text fields, textareas, radio buttons, and submit buttons.
The document provides an overview of HTML 5 including:
- HTML stands for Hypertext Markup Language and is the core markup language used to structure web pages.
- Common IDEs and browsers for developing HTML include Notepad, Visual Studio Code, Chrome, and Firefox.
- Key HTML elements include <html>, <head>, <body>, <div>, <p>, <img>, <a>, <ul>, <ol>, <table>, and <form>.
- Attributes like class, id, and src are used to provide additional information and functionality.
- HTML allows adding headings, text formatting, comments, links, images, videos, and tables to structure and design web pages.
1. The document provides definitions and examples for 55 HTML tags, describing their purpose and any differences between HTML 4.01 and HTML 5 specifications. Key tags covered include headings, paragraphs, lists, links, images, forms, tables and more.
2. Many tags have new or removed attributes in HTML 5 to simplify usage or be replaced by CSS styling, like the <font> tag being replaced by CSS. Frames and <center> are also removed in HTML5.
3. New tags in HTML5 include <video>, <audio>, <canvas>, <footer>, <header> and <nav> to define common page sections, as well as <article>, <aside> and <section>
1. This document provides a summary of 50 HTML tags, describing their purpose, differences between HTML 4.01 and HTML 5, and providing examples of their usage. The tags cover a wide range of common elements for formatting text, images, links, lists, forms, tables and more.
2. Key differences between HTML 4.01 and HTML 5 noted include HTML 5's use of <!DOCTYPE html> instead of document types, removal of deprecated attributes, and addition of new attributes. Some tags like <center> and <font> are not supported in HTML 5, while CSS should be used instead for formatting.
3. The summaries concisely explain each tag's purpose and provide simple examples to illustrate
CSS allows styling of HTML elements through style rules defined in internal or external style sheets. A style rule has a selector that specifies the element to style and declarations that define the properties and values to apply. External style sheets can control styling across multiple pages by linking the style sheet to each page. Common CSS properties include font, color, size and other text properties that can be applied through class or element selectors to groups of elements.
The document provides an introduction to HTML (Hyper Text Markup Language) which is used to format web pages using markup tags to specify elements like headings, paragraphs, lists, links and more. It describes common tags like <b> for bold text, <i> for italics, and <a> for creating links. The document also demonstrates how to create basic HTML elements, lists, tables, and forms to collect user input.
The document provides instructions for installing Internet Information Services (IIS) on Windows 7 to allow for testing and running Active Server Pages (ASP). It explains that IIS is not installed by default on Windows 7 and must be enabled through the Windows Features menu in Control Panel. The steps for installing IIS 7 are outlined, which include turning on IIS in Windows Features, selecting additional application development features like ASP, and confirming the installation by accessing localhost in a web browser. Managing IIS involves exploring the inetpub directory for storing web pages and using the IIS Manager administrative tool. Installing IIS enables running ASP files on a local web server for development and testing purposes.
HTML describes the structure and content of web pages using tags. It uses tags like <p> for paragraphs and <img> to embed images. Common tags also include <head> for metadata, <body> for visible content, and <html> to enclose the entire page. HTML forms allow creating interactive elements like text fields, checkboxes, and buttons to collect user input. HTML5 is the latest version and introduces new semantic elements, multimedia capabilities, and APIs for building web applications.
Cascading Style Sheets (CSS) allow control over the appearance of web pages by separating presentation from content. CSS is used to create consistent styles across multiple pages by defining styles that can be applied using classes and IDs. CSS rules define selectors and properties to style HTML elements, and separating styles from HTML structure makes pages easier to maintain and modify. Common CSS selectors include element, class, ID, and contextual selectors. Styles can be linked to HTML using inline, embedded, and external stylesheets.
This document provides an overview of CSS (Cascading Style Sheets) including definitions, advantages, properties and techniques. It defines CSS as defining how HTML elements are displayed and styles being stored in style sheets. Advantages of CSS include reduced code/page size, easier design/maintenance. Style rules define how to change default element behaviors and have selectors and declarations. External style sheets can apply styles across pages by linking via <LINK>. CSS selection techniques include selecting multiple elements, by context, with classes, <DIV> and <SPAN>. Font properties that can be controlled include family, size, weight, line height and color.
The document provides information about programming and development tools for an introduction to programming course. It discusses Word information layout and how to create documents using text and images. Formatting text, inserting clipart and pictures, and drawing objects in Word are demonstrated. The objectives are to create documents using text layout, workbooks using data layout, and presentations using presentation layout, and publish them as web pages.
The document discusses different types of frames that can be used to organize content on a web page, including:
- Horizontal frames that divide the page into sections side-by-side.
- Vertical frames that divide the page into sections stacked vertically.
- Mixed frames that use both horizontal and vertical divisions.
- Inline frames that display within the normal page content rather than dividing the entire page.
- Nested frames where one frame is contained entirely within another frame.
The document provides examples of code to create each type of frame and screenshots of example page layouts using different framing techniques. Hands-on exercises are also included to practice implementing frames.
This document discusses how to add different form controls to a web page using HTML tags, including checkboxes, drop-down lists, buttons, and options. It describes how to add each control using the appropriate tag, such as <INPUT> for checkboxes, <SELECT> and <OPTION> for drop-down lists, and <BUTTON> for buttons. The document also provides examples of lab exercises to create forms with these different controls and includes objectives and activities for a lesson on forms presentation.
This document provides an overview of different types of frames that can be used in web pages, including inline frames, nested frames, and navigation frames. It includes objectives, explanations of each frame type, examples, and activities for students to create web pages using various frames. The activities instruct students to divide web pages into multiple frames to display related content, include one frame within another, and code pages with links that open linked documents in a separate frame when clicked.
This document discusses how to divide web pages into frames. It covers horizontal, vertical, and mixed framesets. Frames allow dividing the browser window into rectangular sections to display multiple pages simultaneously. The frameset element divides the page into rows and columns, and frames are added to each section using the frame element along with the src attribute to specify the page to load. Hands-on examples and activities are provided to help learn and practice using different types of framesets.
This document discusses how to format HTML tables using various attributes. It covers setting cellspacing and cellpadding to control spacing within the table, using the background attribute to add images to table cells, and attributes like align and style to control text alignment and formatting. Hands-on examples are provided to illustrate these attributes, and exercises direct the reader to practice implementing various table formatting options in HTML files.
The document discusses how to add tables to web pages. It explains that the <TABLE> tag is used to create a table, the <TR> tag is used to insert rows, and the <TD> tag is used to insert cells. The <CAPTION> tag is used to add a caption to a table, and the border attribute of the <TABLE> tag is used to add borders. Hands-on examples are provided to illustrate creating simple tables, adding headings, captions and borders. The rowspan and colspan attributes are described for joining cells across rows and columns.
This document discusses how to add multimedia objects like images, music, movies, and animations to web pages. It explains that the <EMBED> tag is used to embed these objects, along with attributes like src to specify the file path and autostart to control automatic playback. Hands-on examples demonstrate how to add background music and movies using <EMBED>. The document also describes creating animations in Flash and embedding them. Lab exercises instruct students to write code to embed specific multimedia content.
This document discusses adding images to web pages in different ways:
1) Image maps allow different parts of an image to act as hyperlinks using the <IMG>, <MAP>, and <AREA> tags.
2) Images can be added as the background of a web page using the BACKGROUND attribute of the <BODY> tag.
3) Hands-on activities guide the creation of web pages that demonstrate image maps and background images.
This document discusses how to insert and format images in HTML documents. It covers using the <IMG> tag and attributes like src, width, height, and border to embed images. Images can also be used as hyperlinks by placing them inside <A> tags. Hands-on examples demonstrate inserting images, formatting images, and creating image hyperlinks.
This document discusses hyperlinks and link presentation in HTML. It defines internal and external hyperlinks and explains how to open linked pages in new windows. It also covers lab exercises on identifying hyperlink tags and attributes, and changing active, visited, and regular link colors. The document concludes with best practices for using the target attribute to open links in new windows and default link color settings based on link state.
There are two types of hyperlinks: internal and external. An internal hyperlink links to other parts of the same webpage, and is created using the <A> tag. The HREF attribute specifies the destination within the webpage, and the HREF and NAME attributes must have the same value. Students learned about identifying hyperlinks and creating internal hyperlinks to navigate within a webpage. They were assigned an exercise to create internal links in an HTML file.
This document discusses different list types in HTML. It covers nested lists, which are lists within other lists, and definition lists, which are used to define terms. Nested lists can contain lists of the same or different types. Definition lists use the <DL>, <DT>, and <DD> tags, with <DT> for term and <DD> for definition. Hands-on examples and exercises are provided to help learners practice creating these lists.
Ordered and unordered lists are the two main types of lists in HTML. Ordered lists use the <OL> tag and display items in numerical or alphabetical order, while unordered lists use the <UL> tag and display items with bullet points. The <LI> tag is used within both <OL> and <UL> tags to specify each list item. The TYPE and START attributes can be used with the <OL> tag to customize the numbering or lettering of ordered lists.
This document discusses HTML tags for inserting text elements like quotations, abbreviations, and acronyms. It introduces the <BLOCKQUOTE> tag for quotations, the <ABBR> tag with a TITLE attribute for abbreviations, and the <ACRONYM> tag also with a TITLE attribute for acronyms. Examples are given of each tag. The document also previews lab exercises to identify these tags in source code and create an output displaying them.
This document discusses various HTML tags for formatting text, including tags for superscript, subscript, centering text, pre-formatting text, and striking out text. It explains that the <SUP> and </SUP> tags are used to display text as superscript above the line, while <SUB> and </SUB> tags display text as subscript below the line. The <CENTER> tags are used to center text within a row. The <PRE> tag displays text in the browser exactly as formatted in the HTML document, and the <STRIKE> tag strikes out text. Hands-on exercises are provided to practice using these tags.
This document discusses HTML tags for modifying text size, color, and font. It introduces the <BIG>, <SMALL>, and <FONT> tags. <BIG> increases text size slightly, while <SMALL> decreases it. <FONT> allows changing the face, color, and size of text using attributes like "Face", "Size", and "Color". Hands-on activities demonstrate using these tags and identify their attributes in example code. The presentation teaches how to style text using different HTML tags.
The document discusses HTML tags for formatting text. It describes the <B> tag for bolding text, the <I> tag for italicizing text, and the <U> tag for underlining text. Examples are given of each tag. Students are instructed to create a webpage explaining these tags and identifying them in sample code. The key tags covered are <B> for bold, <I> for italic, and <U> for underline.
The document discusses different types of style sheets used in CSS:
1. External style sheets store style rules in separate .css files and are linked to HTML pages using <LINK> tags.
2. Internal style sheets define rules within <STYLE> tags in the <HEAD> section.
3. Inline styles directly assign styles to elements using the style attribute.
The advantages of style sheets include separating content from presentation, enabling consistent styling across pages, and easy updating of styles globally.
This document discusses HTML forms and form elements. It defines forms as collections of controls that allow users to input data. Key points covered include:
- The <FORM> tag is used to add a form to a web page and has "action" and "method" attributes.
- Common form elements/controls include text fields, radio buttons, text areas, checkboxes and drop-down lists. Different tags and attributes are used to implement each type.
- Hands-on examples demonstrate how to create text fields, radio buttons and text areas using the <INPUT> and <TEXTAREA> tags along with appropriate attributes.
- A lab exercise has students explore and modify an example form to learn about
Your One-Stop Shop for Python Success: Top 10 US Python Development Providersakankshawande
Simplify your search for a reliable Python development partner! This list presents the top 10 trusted US providers offering comprehensive Python development services, ensuring your project's success from conception to completion.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfChart Kalyan
A Mix Chart displays historical data of numbers in a graphical or tabular form. The Kalyan Rajdhani Mix Chart specifically shows the results of a sequence of numbers over different periods.
Best 20 SEO Techniques To Improve Website Visibility In SERPPixlogix Infotech
Boost your website's visibility with proven SEO techniques! Our latest blog dives into essential strategies to enhance your online presence, increase traffic, and rank higher on search engines. From keyword optimization to quality content creation, learn how to make your site stand out in the crowded digital landscape. Discover actionable tips and expert insights to elevate your SEO game.
Ivanti’s Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There we’ll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-und-domino-lizenzkostenreduzierung-in-der-welt-von-dlau/
DLAU und die Lizenzen nach dem CCB- und CCX-Modell sind für viele in der HCL-Community seit letztem Jahr ein heißes Thema. Als Notes- oder Domino-Kunde haben Sie vielleicht mit unerwartet hohen Benutzerzahlen und Lizenzgebühren zu kämpfen. Sie fragen sich vielleicht, wie diese neue Art der Lizenzierung funktioniert und welchen Nutzen sie Ihnen bringt. Vor allem wollen Sie sicherlich Ihr Budget einhalten und Kosten sparen, wo immer möglich. Das verstehen wir und wir möchten Ihnen dabei helfen!
Wir erklären Ihnen, wie Sie häufige Konfigurationsprobleme lösen können, die dazu führen können, dass mehr Benutzer gezählt werden als nötig, und wie Sie überflüssige oder ungenutzte Konten identifizieren und entfernen können, um Geld zu sparen. Es gibt auch einige Ansätze, die zu unnötigen Ausgaben führen können, z. B. wenn ein Personendokument anstelle eines Mail-Ins für geteilte Mailboxen verwendet wird. Wir zeigen Ihnen solche Fälle und deren Lösungen. Und natürlich erklären wir Ihnen das neue Lizenzmodell.
Nehmen Sie an diesem Webinar teil, bei dem HCL-Ambassador Marc Thomas und Gastredner Franz Walder Ihnen diese neue Welt näherbringen. Es vermittelt Ihnen die Tools und das Know-how, um den Überblick zu bewahren. Sie werden in der Lage sein, Ihre Kosten durch eine optimierte Domino-Konfiguration zu reduzieren und auch in Zukunft gering zu halten.
Diese Themen werden behandelt
- Reduzierung der Lizenzkosten durch Auffinden und Beheben von Fehlkonfigurationen und überflüssigen Konten
- Wie funktionieren CCB- und CCX-Lizenzen wirklich?
- Verstehen des DLAU-Tools und wie man es am besten nutzt
- Tipps für häufige Problembereiche, wie z. B. Team-Postfächer, Funktions-/Testbenutzer usw.
- Praxisbeispiele und Best Practices zum sofortigen Umsetzen
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/building-and-scaling-ai-applications-with-the-nx-ai-manager-a-presentation-from-network-optix/
Robin van Emden, Senior Director of Data Science at Network Optix, presents the “Building and Scaling AI Applications with the Nx AI Manager,” tutorial at the May 2024 Embedded Vision Summit.
In this presentation, van Emden covers the basics of scaling edge AI solutions using the Nx tool kit. He emphasizes the process of developing AI models and deploying them globally. He also showcases the conversion of AI models and the creation of effective edge AI pipelines, with a focus on pre-processing, model conversion, selecting the appropriate inference engine for the target hardware and post-processing.
van Emden shows how Nx can simplify the developer’s life and facilitate a rapid transition from concept to production-ready applications.He provides valuable insights into developing scalable and efficient edge AI solutions, with a strong focus on practical implementation.
Monitoring and Managing Anomaly Detection on OpenShift.pdfTosin Akinosho
Monitoring and Managing Anomaly Detection on OpenShift
Overview
Dive into the world of anomaly detection on edge devices with our comprehensive hands-on tutorial. This SlideShare presentation will guide you through the entire process, from data collection and model training to edge deployment and real-time monitoring. Perfect for those looking to implement robust anomaly detection systems on resource-constrained IoT/edge devices.
Key Topics Covered
1. Introduction to Anomaly Detection
- Understand the fundamentals of anomaly detection and its importance in identifying unusual behavior or failures in systems.
2. Understanding Edge (IoT)
- Learn about edge computing and IoT, and how they enable real-time data processing and decision-making at the source.
3. What is ArgoCD?
- Discover ArgoCD, a declarative, GitOps continuous delivery tool for Kubernetes, and its role in deploying applications on edge devices.
4. Deployment Using ArgoCD for Edge Devices
- Step-by-step guide on deploying anomaly detection models on edge devices using ArgoCD.
5. Introduction to Apache Kafka and S3
- Explore Apache Kafka for real-time data streaming and Amazon S3 for scalable storage solutions.
6. Viewing Kafka Messages in the Data Lake
- Learn how to view and analyze Kafka messages stored in a data lake for better insights.
7. What is Prometheus?
- Get to know Prometheus, an open-source monitoring and alerting toolkit, and its application in monitoring edge devices.
8. Monitoring Application Metrics with Prometheus
- Detailed instructions on setting up Prometheus to monitor the performance and health of your anomaly detection system.
9. What is Camel K?
- Introduction to Camel K, a lightweight integration framework built on Apache Camel, designed for Kubernetes.
10. Configuring Camel K Integrations for Data Pipelines
- Learn how to configure Camel K for seamless data pipeline integrations in your anomaly detection workflow.
11. What is a Jupyter Notebook?
- Overview of Jupyter Notebooks, an open-source web application for creating and sharing documents with live code, equations, visualizations, and narrative text.
12. Jupyter Notebooks with Code Examples
- Hands-on examples and code snippets in Jupyter Notebooks to help you implement and test anomaly detection models.
Fueling AI with Great Data with Airbyte WebinarZilliz
This talk will focus on how to collect data from a variety of sources, leveraging this data for RAG and other GenAI use cases, and finally charting your course to productionalization.
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceIndexBug
Imagine a world where machines not only perform tasks but also learn, adapt, and make decisions. This is the promise of Artificial Intelligence (AI), a technology that's not just enhancing our lives but revolutionizing entire industries.
OpenID AuthZEN Interop Read Out - AuthorizationDavid Brossard
During Identiverse 2024 and EIC 2024, members of the OpenID AuthZEN WG got together and demoed their authorization endpoints conforming to the AuthZEN API
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Introduction of Cybersecurity with OSS at Code Europe 2024Hiroshi SHIBATA
I develop the Ruby programming language, RubyGems, and Bundler, which are package managers for Ruby. Today, I will introduce how to enhance the security of your application using open-source software (OSS) examples from Ruby and RubyGems.
The first topic is CVE (Common Vulnerabilities and Exposures). I have published CVEs many times. But what exactly is a CVE? I'll provide a basic understanding of CVEs and explain how to detect and handle vulnerabilities in OSS.
Next, let's discuss package managers. Package managers play a critical role in the OSS ecosystem. I'll explain how to manage library dependencies in your application.
I'll share insights into how the Ruby and RubyGems core team works to keep our ecosystem safe. By the end of this talk, you'll have a better understanding of how to safeguard your code.
Generating privacy-protected synthetic data using Secludy and MilvusZilliz
During this demo, the founders of Secludy will demonstrate how their system utilizes Milvus to store and manipulate embeddings for generating privacy-protected synthetic data. Their approach not only maintains the confidentiality of the original data but also enhances the utility and scalability of LLMs under privacy constraints. Attendees, including machine learning engineers, data scientists, and data managers, will witness first-hand how Secludy's integration with Milvus empowers organizations to harness the power of LLMs securely and efficiently.
1. Programming and Development Tools Web Programming
UNIT
2.12
Web Programming
Style Sheets
OBJECTIVES
This unit helps you to use Cascading Style Sheets in your Web pages.
At the end of this unit, you will be able to
List the advantages of using Style Sheets.
Add External Style Sheet to your Web pages.
Add Internal Style Sheet to your Web pages.
Add Inline Style Sheet to your Web pages.
Benchmark standard
Design Web pages with uniformity using Style Sheets.
Style Sheets 2.12-1
2. Programming and Development Tools Web Programming
Let us Revise!
1. List the controls that can be added to a form.
2. State the difference between text field and text area.
3. Mention the use of Action and Method attributes of <FORM> tag.
4. State the difference between radio button and check box.
5. Which tag is used to add drop-down list box to a form.
Introduction
Do you want to change the default values of the attributes of a tag? You can
change it to your need using CSS. CSS stands for Cascading Style Sheets.
The tags in HTML have their own function by default. These tags can be
enhanced by using Style Sheet. A Style Sheet contains a set of instructions
that modifies the values of the attributes of a tag. For example, the tag <H1>
displays the text in black colour. The colour of the text can be changed for
<H1> tag using Style Sheets.
The advantages of using Style Sheets are:
An attribute’s value of a tag can be specified once and the tag can
be used anywhere in the file without specifying the attribute again
and again. It is like changing the default value of an attribute.
If you want to modify any attribute, it is enough if you change the
value in the Style where it is defined instead of changing the values
wherever the tag is used.
Note
CSS, Style Sheet and Cascading Style Sheet all mean the same.
Styles can be defined in 3 ways using:
External Style Sheets,
Internal Style Sheets and
Inline Style Sheet
2.12.1 External Style Sheets
In the External Style Sheets, the tags that are necessary to create styles are
saved in a file with extension .css. This file is linked to the HTML file by using
Style Sheets 2.12-2
3. Programming and Development Tools Web Programming
the <LINK> tag in the HTML file. The <LINK> tag has HREF attribute to
which the URL of the style sheet file (.css) is assigned. The <LINK> tag is
placed inside the <HEAD> tag.
Hands-On!
The following example illustrates the use of External Style Sheets in a
Webpage.
Open the HTML file Ext_CSS.html in Internet Explorer.
The code in Ext_CSS.html file is given below:
<HTML>
<HEAD>
<TITLE> CSS </TITLE>
<link REL="StyleSheet" TYPE="text/css"
HREF="Style1.css">
</HEAD>
<BODY><FONT Size=5>
<H1> WORLD POPULATION : 2003 </H1>
The first five most populous countries are: <BR>
<OL>
<LI> China
<LI> India
<LI> United States
<LI> Indonesia
<LI> Brazil
</OL>
<TABLE Cellspacing=0 Align="Center">
<TR Bgcolor="Darkgreen" Height="40"> <TH
Width="20%"> S.No.<TH Width="40%">Country<TH
Width="40%"> Population</TR>
<TR> <TD>1 <TD>China <TD>1,286,975,468 </TR>
<TR> <TD>2 <TD>India <TD>1,049,700,118 </TR>
<TR> <TD>3 <TD>United States<TD>290,342,554 </TR>
<TR> <TD>4 <TD>Indonesia <TD>234,893,453 </TR>
<TR> <TD>5 <TD>Brazil <TD>182,032,604 <TR>
</TABLE>
</FONT>
</BODY>
Style Sheets 2.12-3
4. Programming and Development Tools Web Programming
</HTML>
Code Sample 2.12.1
The Web page shown in Figure 2.12.1 is displayed in the browser window.
Figure 2.12.1: A Web Page Using External Style Sheet
In the code shown in Code Sample 2.12.1, the tag <link Rel="StyleSheet"
Type="text/css" Href="Style1.css"> creates a link to the Style1.css file.
The following are the tags specified in Style1.css file:
H1 {Text-Align:Center;color:Firebrick}
BODY {Background:LightYellow}
TABLE{Border:outset 5pt;Background-
Image:URL("Picture2.jpg");Width:60%;Color:yellow;Font-
size=20}
TD {Text-Align: Center; Height: 40}
OL {Color:Firebrick}
Code Sample 2.12.2
The following is the syntax used to modify the attributes of a tag:
Tag_Name {Attribute1: Value; Attribute2: Value; …………..}
Style Sheets 2.12-4
5. Programming and Development Tools Web Programming
It is clear from the Code Sample 2.12.2 that <H1>, <BODY>, <TABLE>,
<TD> and <OL> are the tags that are modified. The following are the
changes made:
The Color attribute is set to Firebrick and the text is centered for <H1> tag.
The Background Color is set to Lightyellow for the <BODY> tag.
The border width is set to 5, Picture2.jpg is set as the background image, table
width is set to 60% of the width of the browser window, the colour of the text is
set to Yellow and the size of the text is set to 20 for the <TABLE> tag.
The Height of a cell is set to 40 and the text is centered for <TD> tag.
The colour is set to Firebrick for <OL> tag.
When these modified tags are used in your HTML file, the tags take the
values of the attributes mentioned in the .css file unless the attributes are
specified. For example, the heading of the Web page shown in Figure 2.12.1
is centered instead of left alignment.
Note
External Style Sheet is also called as Linked Style Sheet
Self-Check Exercise 2.12.1
Say true or false:
1. In External Style Sheets, styles are defined in a separate file with extension .ccs.
2. The 3 ways of defining styles are using External Style Sheets, Internal Style Sheets
and Inline Styles.
3. The <LINK> tag is placed inside the <HEAD> tag.
Lab Exercise
Lab Exercise 1: Open D12_1.html in Internet Explorer. The following code will be present in
D12_1.html.
<HTML>
<HEAD>
<TITLE> WELCOME TO ZAI SUPER MARKET </TITLE>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS"
HREF="D12_1.CSS">
<H5 ALIGN="CENTER">
WELCOME TO ZAI SUPER MARKET
</H5>
<H1 ALIGN="CENTER">
Style Sheets 2.12-5
7. Programming and Development Tools Web Programming
<TD ALIGN="CENTER">102 </TD>
<TD> Lychee </TD>
<TD> 150 ML</TD>
<TD> 1.20 RM</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
1. Locate the tag which is used to call the external style sheet file into html file.
2. Identify the attribute which is used to define the relationship between the linked file and
the HTML file.
3. Name the attribute which is used to specify the type of the file.
Lab Exercise 2: Open D12_1.HTML in Notepad.
1. View the source code in the Notepad.
2. Change the background and text colour as shown in the following Figure 2.12.2.
Figure 2.12.2: Welcome to ZAI Super Market
Lab Exercise 3: Create an external style sheet and display the output as given in the following
Figure 2.12.3.
Style Sheets 2.12-7
8. Programming and Development Tools Web Programming
Figure 2.12.3: Wonders of the World
2.12.2 Internal Style Sheets
In the Internal Style Sheets, the tags that are necessary to create styles are
placed inside the <STYLE> tag. The <STYLE> tag is placed inside the
<HEAD> tag of the HTML file.
Note
Internal Style Sheets are also called as Embedded Style Sheets.
Hands-On!
The following example illustrates the use of Internal Style Sheets in a
Webpage.
Open the HTML file Int_CSS.html in Internet Explorer.
The code in Int_CSS.html file is given below:
<HTML>
<HEAD>
<TITLE> CSS </TITLE>
Style Sheets 2.12-8
9. Programming and Development Tools Web Programming
<STYLE Type="text/css">
H1 {Text-Align:Center;color:Firebrick}
BODY {Background:LightYellow}
TABLE{Border:outset 5pt;
Background-Image:URL("Picture2.jpg");
Width:60%;Color:yellow;Font-size=20}
TD {Text-Align:Center;Height:40}
OL {Color:Firebrick}
</STYLE>
</HEAD>
<BODY><FONT Size=5>
<H1> WORLD POPULATION : 2003 </H1>
The first five most populous countries are: <BR>
<OL>
<LI> China
<LI> India
<LI> United States
<LI> Indonesia
<LI> Brazil
</OL>
<TABLE Cellspacing=0 Align="Center">
<TR Bgcolor="Darkgreen" Height="40"> <TH
Width="20%"> S.No.<TH Width="40%">Country<TH
Width="40%"> Population</TR>
<TR> <TD>1 <TD>China <TD>1,286,975,468 </TR>
<TR> <TD>2 <TD>India <TD>1,049,700,118 </TR>
<TR> <TD>3 <TD>United States<TD>290,342,554 </TR>
<TR> <TD>4 <TD>Indonesia <TD>234,893,453 </TR>
<TR> <TD>5 <TD>Brazil <TD>182,032,604 <TR>
</TABLE>
</FONT>
</BODY>
</HTML>
Code Sample 2.12.3
The same Web page shown in Figure 2.12.1 is displayed in the browser
window.
Style Sheets 2.12-9
10. Programming and Development Tools Web Programming
In External Style Sheets, you created a file with extension .css. This file
contains all the tags that were used to define the styles. In Internal Style
Sheet, all the tags that are required to define the styles are placed inside the
<STYLE> and </STYLE> tags which in turn is placed inside the <HEAD>
and </HEAD> tags. The difference between External Style Sheet and
Internal Style Sheet is that the former can be used by any HTML file whereas
the latter can be used only by the HTML file where it is defined.
Note
No separate file is created for defining styles in Internal Style Sheets.
2.12.3 Inline Style Sheets
In the Inline Styles, the styles are inserted directly into the tags by assigning
styles to the Style attribute of respective tags.
Hands-On!
The following example illustrates the use of Inline Styles in a Webpage.
Open the HTML file Inl_CSS.html in Internet Explorer.
The code in Inl_CSS.html file is given below:
<HTML>
<HEAD>
<TITLE> CSS </TITLE>
</HEAD>
<BODY Style=Background:LightYellow><FONT Size=5>
<H1 Style="Text-Align:Center;color:Firebrick">
WORLD POPULATION : 2003 </H1>
The first five most populous countries are: <BR>
<OL Style="Color:Firebrick">
<LI> China
<LI> India
<LI> United States
<LI> Indonesia
<LI> Brazil
</OL>
<TABLE Align="Center" Cellspacing="0"
Style="Border:outset 5pt;
Style Sheets 2.12-10
12. Programming and Development Tools Web Programming
</HTML>
Code Sample 2.12.3
The same Web page shown in Figure 2.12.1 is displayed in the browser
window.
For example, the following code in Code Sample 2.12.3, sets the background
colour of the Web page to Light yellow using Inline Styles.
<BODY Style=Background:LightYellow>
Here, the background of the Web page is set to Lightyellow by assigning the
value to the Style attribute of the <BODY> tag.
Order of Precedence
If more than one type of Style Sheet is specified in a HTML file, the browser
follows an order to select the Style Sheet to be used. The following is the
order of precedence followed by a browser:
1. Inline Style Sheet
2. Internal or Embedded Style Sheet
3. External or Linked Style Sheet
4. Default style used by the browser (If the Style is not specified).
If all the 3 Style Sheets are specified, the Internal Style Sheet adopts the
styles mentioned in the External Style Sheet that are not mentioned in the
Internal Style Sheet. The Inline Style Sheet adopts the styles mentioned in the
Internal Style Sheet that are not mentioned in the Inline Style Sheet. Hence, it
is called as Cascading Style Sheet.
Lab Exercise
Lab Exercise 4: Create an external style sheet and display the output as given in the following
Figure 2.12.4.
Style Sheets 2.12-12
13. Programming and Development Tools Web Programming
Figure 2.12.4: A Web Page Using External Style Sheet
Self-Check Exercise 2.12.2
Fill in the blanks:
1. The tags that are required to define the styles using Internal Style Sheet are placed
inside the _____ and _____ tags.
2. ______ attribute is used to specify Inline Styles.
3. ______ Style Sheet has the highest priority.
Activity 2.12.1
1. Create a Web page that explains Cascading Style Sheets as shown in
Figure 2.12.5.
2. Save the HTML file as Activity2.12.1.html.
3. The content of the same page is continued in Figure 2.12.6.
Style Sheets 2.12-13
14. Programming and Development Tools Web Programming
Figure 2.12.5: A Web page Explaining CSS
Figure 2.12.6: Continuation of Web page shown in Figure 2.12.5
Style Sheets 2.12-14
15. Programming and Development Tools Web Programming
Activity 2.12.2
As explained earlier, the Web pages created in the Activities of all the units
from 3 to 12 will lead to the creation of a Web Site. The Web pages in all the
Activities should be linked together. Do the following to create the home page
for this Web site.
1. Create a Web page as shown in Figure 2.12.7 whose continuation is given
in Figure 2.12.8. The files to be linked and their location are given in Table
2.12.1.
2. Save the HTML file as Index.html in C:HTML folder.
Figure 2.12.7: A Web page Containing Links
Style Sheets 2.12-15
16. Programming and Development Tools Web Programming
Figure 2.12.8: Continuation of Web page shown in Figure 2.12.7
Activity 2.12.3
The home page shown in Figure 2.12.9 contains two vertical frames. Load the
file Index.html located at C:HTML folder in the left frame and Activity3.html
located at C:HTMLUnit 7Activity folder in the right frame. When a link in the
left frame is clicked, the corresponding page should be opened in the right
frame. The link, the file to be linked and its location is given in Table 2.12.1.
Link in the left File to be linked Location
frame
About the Internet Activity3.html C:HTMLUnit 7Activity
Basics of HTML Activity5.html C:HTMLUnit 3Activity
Adding Headings Activity1.html C:HTMLUnit 3Activity
Inserting Line Breaks Activity2.html C:HTMLUnit 3Activity
and Paragraphs
Drawing Horizontal Activity3.html C:HTMLUnit 3Activity
Rule
Scrolling the Text Activity4.html C:HTMLUnit 3Activity
Making the Text Bold, Activity1.html C:HTMLUnit 4Activity
Style Sheets 2.12-16
17. Programming and Development Tools Web Programming
Italic and Underlined
Changing the Size of Activity2.html C:HTMLUnit 4Activity
the Text
Positioning and Striking Activity3.html C:HTMLUnit 4Activity
the Text
Ordered List Activity1.html C:HTMLUnit 5Activity
Unordered List Activity2.html C:HTMLUnit 5Activity
Definition List Activity3.html C:HTMLUnit 5Activity
Adding Hyperlinks Activity1.html C:HTMLUnit 6Activity
Inserting Images Activity1.html C:HTMLUnit 7Activity
Inserting Music, Movie Activity1.html C:HTMLUnit 8Activity
and Animation
Adding Tables Activity1.html C:HTMLUnit 9Activity
Creating Frames Activity6.html C:HTMLUnit 10Activity
Adding Forms and Activity2.html C:HTMLUnit 11Activity
Controls
Cascading Style Activity1.html C:HTMLUnit 12Activity
Sheets
Table 2.12.1: Details of files to be linked
1. Create a Web page shown in Figure 2.12.9. Save the HTML file as
Main.html in C:HTML folder.
2. Save the HTML file as Main.html in C:HTML folder.
3. All the Web pages of a Web site should have the same appearance. So
create an external style sheet file Style.css in C:HTML folder. The commands
in Style.css is shown below:
H1 {Text-Align:Center;Color:Firebrick}
H2 {color:Firebrick}
H3 {color:Firebrick}
BODY {Background:Lightyellow;Font-Size:14pt}
FONT {Font-Size:14pt}
4. Add the following code inside the <HEAD> tag in all the activity files
created.
<LINK Rel="Stylesheet" Href="C:HTMLStyle.css">
5. Open the Main.html folder in Internet Explorer and browse the Web site
created.
Style Sheets 2.12-17
18. Programming and Development Tools Web Programming
Figure 2.12.9: Home page
Technical Terminologies
External Style Sheet - A Style Sheet placed in an external file with
extension .css
Internal Style Sheet - A Style Sheet placed internally in the same
HTML file.
Inline Style Sheet - Styles defined inside the tag using Style attribute.
Cascading Style Sheet - The Style Sheet having higher precedence
adopts the styles mentioned in a Style Sheet of
lower precedence. This is called as Cascading
Style Sheet.
Summary
In this unit, you learnt that
CSS stands for Cascading Style Sheets.
The 3 types of Style Sheets are Internal Style Sheet, External Style
Sheet and Inline Style Sheet.
In the External Style Sheets, the tags that are necessary to create
styles are saved in a file with extension .css.
In the Internal Style Sheets, the tags that are necessary to create
styles are placed inside the <STYLE> tag.
Style Sheets 2.12-18
19. Programming and Development Tools Web Programming
In the Inline Styles, the values that are necessary to create styles
are assigned to the Style attribute of respective tags.
Inline styles hold the highest priority among the Style Sheets.
Assignment
I. Answer the following questions:
1. List any 2 advantages of using Style Sheets.
2. Name the three Style Sheets.
3. Create a .css file to create an External Style Sheet that modifies the
attributes of <TABLE> tag.
4. Write the <STYLE> tag to convert the External Style Sheet mentioned in
3rd question to Internal Style Sheet.
5. Write the <TABLE> tag to convert the Internal Style Sheet mentioned in 4th
question to Inline Style Sheet.
Style Sheets 2.12-19
20. Programming and Development Tools Web Programming
Criterion Referenced Test
Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.
Name:
Subject: Programming and Development Tools
Unit: Style Sheets
Please tick [ √ ] the appropriate box when you have achieved the respective
competency.
Date Style Sheets
C1 C2 C3
Comment
Competency codes:
C1 = Create a Web page using External Style Sheet.
C2 = Create a Web page using Internal Style Sheet.
C3 = Create a Web page using Inline Style Sheet.
Style Sheets 2.12-20