In Class Assignment 1 WebServices-CSET3200
September 28th, 2016
HTML & CSSWhat is Bootstrap?
· Bootstrap is a free front-end framework for faster and easier web development
· Bootstrap includes HTML and CSS based design templates for forms, buttons, tables, navigation, and many other, as well as optional JavaScript plugins
· Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites, which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Why Use Bootstrap?
Advantages of Bootstrap:
· Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
· Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
· Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
· Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
· Download Bootstrap from getbootstrap.com
· Include Bootstrap from a CDN
· There are several templates available including Portfolio Template.
Quick Reminders:
* Browser opens the index page as the homepage automatically.
Three quick points before we go on to the next lesson:
1. What you made in lab 1 and 2 is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components.
2. The document title is what appears at the very top of the browser window.
3. Of all the things on your web page, the title is what search engines consider most when ranking a page. Choose your titles carefully, and keep them brief.
IMPORTANT NOTE: Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. In many instances, just hitting the refresh button does not quite do the trick.
Agenda:
Today we will see and document the output/results we get after writing these code snippets and different exercises.
The aim of today’s lab is to be able to communicate your concept in a technical manner using the technical terminologies, in addition to learning new skill set. You can earn up to 30 points at the completion of this lab.
In case you find it extremely hard to express a specific outcome in words, then you are allowed to take a screen shot of the outcome and submit it in your document. However, there is a limit to screen shots. You can add a maximum of 7 images for this lab.
Introduction to Nav Area:
1. In an html file, add the following snippets in the body section.
2. Add the following for Styling:
3. State the major differences you have noticed so far.
<body bgcolor="#ccffcc">
Something really cool
</body>
#ccffcc is computerese (the symb.
Keep domain names simple and related to the website theme. Ask others for opinions on potential domain names. When choosing a web host, consider speed, reliability, price, storage, technical support and features. Promote the website by spreading the word and optimizing the site for search engines.
HTML Lab ProjectTo create a simple web page you will need .docxadampcarr67227
HTML Lab Project
To create a simple web page you will need to use a text processor (Notepad) and HTML (hypertext markup language). Do NOT use Word which can create some problems by automatically formatting your work as a web page.
The tags (items enclosed in < >) from HTML create the special effects that are seen on web pages when using a browser like Internet Explorer.
Note: some tags require a starting and ending tag. For example: <h1>This is my home page </h1>
Also if multiple tags are used to format a single item, ending tags must be written in reverse order from the starting tags.
Example:
<h1><center> My First Home Page </center></h1>
tag1 tag2 endtag2 endtag1
After completing the steps in the tutorial, you should be able to:
1. Create a Home Page using HTML
2. Create headings
3. Place text and graphics in an HTML document
4. Use attributes such as font color with tags
5. Create links to other places or documents
Home Pages
The home page of a web site is the starting point that usually describes the purpose of the web site and its categories. The page typically includes hyperlinks which will take the viewer to other web sites or other places within the same web site. In planning a home page consider these items
· Title – this text will appear on the blue title bar of your web page
· Headings – customarily the first heading is the same as the title; it appears as the first line of your home page. Each browser displays headings in a unique way, but they allow several levels of headings from H1 to H6. Heading 1 would be the largest, most noticeable, heading 6 the smallest. In the examples that follow, the first line of each pair shows the HTML tags; the second line is the effect produced.
<h1>H1 headings</h1>
H1 headings
<h2> H2 headings</h2>
H2 headings
<h3>H3 headings</h3>
H3 headings<h4> H4 headings</h4>
H4 Headings
<h5> H5 headings</h5>
H5 Headings
<h6>H6 headings</h6>
H6 Headings
Content - Text that explains your home page or special features of the page.
Create a Sample HTML Page
Step 1.
A. Open Notepad (Click on Start, Programs, Accessories, Notepad).
B. Enter the following text:
<html>
<head>
<title>Your Name Home Page</title>
</head>
<h1>Your Name Home Page </h1>
</html>
C. Choose File, Save As. For the file name, use mysample_Lastname_Firstname.htm in Save As Type, choose All Files, and save to your desktop, or other easy to find location.
(CAUTION: if you neglect to choose All Files, this will be saved as a text file, ending in txt, and will not be available for opening in your browser.
Step 2.
A. Start your browser (Internet Explorer). It is not necessary to be online.
B. From the menu bar, choose File, Open.
C. Browse for the file you just saved on your desktop (mysample_firstname_lastname.htm).
D. Choose Open.
E. You should see only the title bar and a heading on your newly created homepage.
Step 3.
A.
The document provides instructions for setting up a basic website using HTML and CSS. It begins with directions for connecting to WiFi and downloading Sublime Text editor. It then outlines the basic HTML page structure and teaches how to add semantic elements like header, nav, section and footer. Styles are applied using CSS to change colors and layout. The document provides step-by-step guidance for adding content and images to the page. It concludes by suggesting additional features like responsive design.
This document discusses how to use the Bootstrap framework to design screens for a web application. It explains that Bootstrap was chosen for its unified page design, ease of customization, and low learning curve. The author describes downloading Bootstrap templates, including the Bootstrap CSS file, then customizing styles by overwriting rules in a separate CSS file. Firefox's web development tools are used to identify applied styles and test edits. In total, around 800 steps of CSS customization were needed to modify elements like navbars, tables, and modals for the desired screen designs.
The document provides instructions on how to create websites using HTML5 and CSS. It introduces the basic concepts of HTML5 and CSS, explaining how they are used to structure and style web pages. It then provides step-by-step instructions on how to build a basic website template using HTML5 elements like header, nav, section, aside, and footer, and how to customize the template's appearance using CSS properties for fonts, colors, backgrounds, borders and more. The goal is to educate others on designing attractive and well-structured websites without advanced technical skills.
We will cover whole of the web development basics comprising of HTML, CSS, JavaScript in this series.
Following are topics useful for any newbie to intermediate who is interested in learning Web Development
HTML is used to structure and style web pages. The document provides guidance on planning a library website and includes basic HTML tags for formatting text, adding images, creating lists, inserting links, and constructing tables. It also recommends free web creation tools and sites for building pages.
This document provides an overview of HTML, DHTML, and JavaScript. It discusses key topics such as:
- HTML is used to define different parts of a web page using tags. Basic HTML tags include <html>, <head>, <title>, and <body>.
- Dynamic HTML (DHTML) allows for controls that can respond to events and code modules, enabling richer interactive features compared to regular HTML.
- JavaScript is a programming language used to create dynamic web sites and enhance pages with interactive features. It runs in the client browser and can perform tasks like form validation, calculations, and more.
Keep domain names simple and related to the website theme. Ask others for opinions on potential domain names. When choosing a web host, consider speed, reliability, price, storage, technical support and features. Promote the website by spreading the word and optimizing the site for search engines.
HTML Lab ProjectTo create a simple web page you will need .docxadampcarr67227
HTML Lab Project
To create a simple web page you will need to use a text processor (Notepad) and HTML (hypertext markup language). Do NOT use Word which can create some problems by automatically formatting your work as a web page.
The tags (items enclosed in < >) from HTML create the special effects that are seen on web pages when using a browser like Internet Explorer.
Note: some tags require a starting and ending tag. For example: <h1>This is my home page </h1>
Also if multiple tags are used to format a single item, ending tags must be written in reverse order from the starting tags.
Example:
<h1><center> My First Home Page </center></h1>
tag1 tag2 endtag2 endtag1
After completing the steps in the tutorial, you should be able to:
1. Create a Home Page using HTML
2. Create headings
3. Place text and graphics in an HTML document
4. Use attributes such as font color with tags
5. Create links to other places or documents
Home Pages
The home page of a web site is the starting point that usually describes the purpose of the web site and its categories. The page typically includes hyperlinks which will take the viewer to other web sites or other places within the same web site. In planning a home page consider these items
· Title – this text will appear on the blue title bar of your web page
· Headings – customarily the first heading is the same as the title; it appears as the first line of your home page. Each browser displays headings in a unique way, but they allow several levels of headings from H1 to H6. Heading 1 would be the largest, most noticeable, heading 6 the smallest. In the examples that follow, the first line of each pair shows the HTML tags; the second line is the effect produced.
<h1>H1 headings</h1>
H1 headings
<h2> H2 headings</h2>
H2 headings
<h3>H3 headings</h3>
H3 headings<h4> H4 headings</h4>
H4 Headings
<h5> H5 headings</h5>
H5 Headings
<h6>H6 headings</h6>
H6 Headings
Content - Text that explains your home page or special features of the page.
Create a Sample HTML Page
Step 1.
A. Open Notepad (Click on Start, Programs, Accessories, Notepad).
B. Enter the following text:
<html>
<head>
<title>Your Name Home Page</title>
</head>
<h1>Your Name Home Page </h1>
</html>
C. Choose File, Save As. For the file name, use mysample_Lastname_Firstname.htm in Save As Type, choose All Files, and save to your desktop, or other easy to find location.
(CAUTION: if you neglect to choose All Files, this will be saved as a text file, ending in txt, and will not be available for opening in your browser.
Step 2.
A. Start your browser (Internet Explorer). It is not necessary to be online.
B. From the menu bar, choose File, Open.
C. Browse for the file you just saved on your desktop (mysample_firstname_lastname.htm).
D. Choose Open.
E. You should see only the title bar and a heading on your newly created homepage.
Step 3.
A.
The document provides instructions for setting up a basic website using HTML and CSS. It begins with directions for connecting to WiFi and downloading Sublime Text editor. It then outlines the basic HTML page structure and teaches how to add semantic elements like header, nav, section and footer. Styles are applied using CSS to change colors and layout. The document provides step-by-step guidance for adding content and images to the page. It concludes by suggesting additional features like responsive design.
This document discusses how to use the Bootstrap framework to design screens for a web application. It explains that Bootstrap was chosen for its unified page design, ease of customization, and low learning curve. The author describes downloading Bootstrap templates, including the Bootstrap CSS file, then customizing styles by overwriting rules in a separate CSS file. Firefox's web development tools are used to identify applied styles and test edits. In total, around 800 steps of CSS customization were needed to modify elements like navbars, tables, and modals for the desired screen designs.
The document provides instructions on how to create websites using HTML5 and CSS. It introduces the basic concepts of HTML5 and CSS, explaining how they are used to structure and style web pages. It then provides step-by-step instructions on how to build a basic website template using HTML5 elements like header, nav, section, aside, and footer, and how to customize the template's appearance using CSS properties for fonts, colors, backgrounds, borders and more. The goal is to educate others on designing attractive and well-structured websites without advanced technical skills.
We will cover whole of the web development basics comprising of HTML, CSS, JavaScript in this series.
Following are topics useful for any newbie to intermediate who is interested in learning Web Development
HTML is used to structure and style web pages. The document provides guidance on planning a library website and includes basic HTML tags for formatting text, adding images, creating lists, inserting links, and constructing tables. It also recommends free web creation tools and sites for building pages.
This document provides an overview of HTML, DHTML, and JavaScript. It discusses key topics such as:
- HTML is used to define different parts of a web page using tags. Basic HTML tags include <html>, <head>, <title>, and <body>.
- Dynamic HTML (DHTML) allows for controls that can respond to events and code modules, enabling richer interactive features compared to regular HTML.
- JavaScript is a programming language used to create dynamic web sites and enhance pages with interactive features. It runs in the client browser and can perform tasks like form validation, calculations, and more.
Basic html tutorial for developing a website by za3miShahzad Zaman
The document provides an introduction to basic HTML elements and tags. It explains the structure of an HTML document with the <html>, <head>, and <body> tags. It describes common page elements like the <title>, headings (<h1>-<h6>), paragraphs (<p>), and horizontal rules (<hr>). It also covers how to change text formatting with font tags and attributes for color, size, bold, italics. Additionally, it discusses how to add links, images, lists, tables, and special characters to an HTML page. The document serves as a tutorial for basic HTML syntax and elements.
This document provides an introduction to basic HTML elements and structure. It explains that HTML pages have a <head> section containing metadata like the <title>, and a <body> section containing visible content. Common elements covered include headings, paragraphs, links, images, lists, and tables. It also discusses adding styling through fonts, colors, and other tags. The document aims to teach fundamental HTML concepts to get readers started with coding basic web pages.
The document provides an introduction to basic HTML elements and tags. It explains the structure of an HTML document with the <html>, <head>, and <body> tags. It describes common page elements like the <title>, headings (<h1>-<h6>), paragraphs (<p>), and horizontal rules (<hr>). It also covers how to change text formatting with font tags and attributes for color, size, bold, italics. Additionally, it discusses how to add links, images, lists, tables, and special characters to an HTML page.
This document provides an introduction to basic HTML elements and structure. It explains that HTML pages have a <head> section containing metadata like the <title>, and a <body> section containing visible content. Common elements covered include headings, paragraphs, links, images, lists, and tables. It also discusses adding styling through fonts, colors, and other tags. The document aims to teach fundamental HTML concepts to get readers started with coding basic web pages.
Designing a website involves many steps. Web designers first create their designs in Photoshop. Those designs are then converted into HTML format. This document covers the process of converting by hand, without the aid of PSD conversion programs or websites.
This document provides an introduction to HTML and covers several basic HTML elements for formatting text. It discusses headings, paragraphs, breaks, and horizontal rules. It also covers setting document properties like background color and text color. Character formatting elements are introduced like bold, italics, font size, color, and alignment. The document recommends starting with a basic HTML template and provides examples of coding structures for the various elements.
This document provides an introduction to HTML and covers several basic elements for formatting text in HTML documents, including:
1. Headings (<H1>-<H6>) are used to divide up sections of text and are displayed in decreasing font sizes. Paragraphs (<P>) allow text to automatically wrap to the width of the browser.
2. Breaks (<BR>) insert line breaks, while horizontal rules (<HR>) add horizontal lines across the page.
3. Character formatting elements like <B> for bold, <I> for italics, and <FONT> for changing text size allow styling of individual characters.
This document provides an introduction to HTML and covers various topics related to creating HTML documents, including:
1. Definitions of key terms like HTML, URL, and browser.
2. How to create a basic HTML document structure and set document properties like the background color.
3. How to add different elements like headings, paragraphs, breaks, and horizontal rules to structure the content and text.
This document provides an introduction to HTML and covers several key topics:
1. It defines important terms like HTML, URL, and browser.
2. It discusses the basic structure of an HTML document including the <head> and <body> sections and common tags like <title> and <p>.
3. It covers ways to format text including headings, paragraphs, breaks, horizontal rules, bold, italics, underline, and font colors. It also discusses alignment and special characters.
This document provides an introduction to HTML and covers several key topics:
1. It defines important terms like HTML, URL, and browser.
2. It discusses the basic structure of an HTML document including tags, headings, paragraphs, and breaks.
3. It covers how to set document properties like the background color, text color, and link colors.
4. It explains how to preview and view HTML documents in a browser and engage in the edit-save-view cycle of creating webpages.
This document provides an introduction to HTML and covers several key topics:
1. It defines important terms like HTML, URL, and browser.
2. It discusses the basic structure of an HTML document including the <head> and <body> tags.
3. It covers how to set document properties like the background color and text color in the <body> tag.
4. It explains different text formatting tags like <b> for bold, <i> for italics, and <font> for changing text size or color.
web development html css javascrptt902350_HTML_Jar.pptPuniNihithasree
This document provides an introduction to HTML and covers several key topics:
1. It defines important HTML terms like HTML, URL, and browser.
2. It discusses HTML tags, including common tags like <TITLE> and <BODY>, and explains that tags are not case sensitive.
3. It covers choosing a text editor for writing HTML, and recommends NotePad for beginners to create basic HTML pages and view them in a browser.
This document provides an introduction to HTML and covers various topics related to creating HTML documents, including:
1. Definitions of key terms like HTML, URL, and browser.
2. How to create a basic HTML document structure and set document properties using tags like <HTML>, <HEAD>, <TITLE>, and <BODY>.
3. How to add headings, paragraphs, breaks, and horizontal rules to structure content on the page.
4. How to format text using bold, italics, and other tags.
In summary, the document serves as a tutorial for beginners on the basic building blocks of creating HTML pages.
This document provides an introduction to HTML and covers several key topics:
1. It defines important HTML terms like HTML, URL, and browser.
2. It discusses HTML tags, including common tags like <TITLE> and <BODY>, and explains that tags are not case sensitive.
3. It covers choosing a text editor for writing HTML, and recommends NotePad for beginners to create basic HTML pages and view them in a browser.
This document provides an introduction to HTML and covers various topics related to creating HTML documents, including:
1. Definitions of key terms like HTML, URL, and browser.
2. How to create a basic HTML document structure and set document properties using tags like <HTML>, <HEAD>, <TITLE>, and <BODY>.
3. How to format text within HTML documents using tags like <H1>-<H6> for headings, <P> for paragraphs, <BR> for breaks, and <HR> for horizontal rules.
Web development and web design with seoRajat Anand
Happy to Help is a website that aims to provide household services like plumbing and electricians to users by connecting them directly to local service providers. The website allows users to find and book these small household services from the comfort of their home by selecting their location and desired service on the website. It provides contact information of different pre-screened service providers to make the process easy for users. The website aims to enhance communication between users and service providers through its online platform.
HTML5 is the newest version of HTML that adds new semantic elements, built-in audio and video playback, and features like the canvas element for drawing graphics. It simplifies the syntax of earlier HTML versions and aims to make web pages more semantic, reduce the need for plugins, and work across devices. New elements in HTML5 include <header>, <footer>, <nav>, <video>, <audio>, <canvas>, and new form input types. It is still a work in progress with partial browser support.
The document discusses the features of HTML5 including:
1) New elements such as <video>, <audio>, and <canvas> that allow embedding multimedia directly into webpages.
2) Block-level elements like <article>, <section>, <aside>, <header>, <footer>, and <nav> that help define page structure and outlines.
3) Associated technologies enabled by HTML5 including geolocation, offline storage, and CSS3 features for animations, gradients and rounded corners.
Attached is a joint letter to Capitol Hill to advocate for increased.docxjaggernaoma
Attached is a joint letter to Capitol Hill to advocate for increased funding of the Public Health and Social Services Emergency Fund which included funding for nurses that are furloughed. Also, a type of reward that ANA is advocating for during Mental Health Month there is a call for legislative support for hazard pay and mental health services for nurses.
https://www.nursingworld.org/practice-policy/work-environment/health-safety/disaster-preparedness/coronavirus/what-you-need-to-know/legislative-and-regulatory-advocacy/covid-19-legislative-regulatory-and-advocacy-update/
What should nurses do to support each other and the professions during the COVID-19 pandemic?
.
Attached is a copy of an interview done with a Tribal member regardi.docxjaggernaoma
Attached is a copy of an interview done with a Tribal member regarding the issue of Tribal sovereignity. It needs to be restructured into something that resembles a newspaper article or reflection essay. The emphasis would be on five questions within the piece that discuss Tribal sovereignity, and the answers to same based on the entire document. The document needs to be approx. 2 pages, #12 font, double spaced. It needs to be completed by Tuesday afternoon. That would be tomorrow.
.
Basic html tutorial for developing a website by za3miShahzad Zaman
The document provides an introduction to basic HTML elements and tags. It explains the structure of an HTML document with the <html>, <head>, and <body> tags. It describes common page elements like the <title>, headings (<h1>-<h6>), paragraphs (<p>), and horizontal rules (<hr>). It also covers how to change text formatting with font tags and attributes for color, size, bold, italics. Additionally, it discusses how to add links, images, lists, tables, and special characters to an HTML page. The document serves as a tutorial for basic HTML syntax and elements.
This document provides an introduction to basic HTML elements and structure. It explains that HTML pages have a <head> section containing metadata like the <title>, and a <body> section containing visible content. Common elements covered include headings, paragraphs, links, images, lists, and tables. It also discusses adding styling through fonts, colors, and other tags. The document aims to teach fundamental HTML concepts to get readers started with coding basic web pages.
The document provides an introduction to basic HTML elements and tags. It explains the structure of an HTML document with the <html>, <head>, and <body> tags. It describes common page elements like the <title>, headings (<h1>-<h6>), paragraphs (<p>), and horizontal rules (<hr>). It also covers how to change text formatting with font tags and attributes for color, size, bold, italics. Additionally, it discusses how to add links, images, lists, tables, and special characters to an HTML page.
This document provides an introduction to basic HTML elements and structure. It explains that HTML pages have a <head> section containing metadata like the <title>, and a <body> section containing visible content. Common elements covered include headings, paragraphs, links, images, lists, and tables. It also discusses adding styling through fonts, colors, and other tags. The document aims to teach fundamental HTML concepts to get readers started with coding basic web pages.
Designing a website involves many steps. Web designers first create their designs in Photoshop. Those designs are then converted into HTML format. This document covers the process of converting by hand, without the aid of PSD conversion programs or websites.
This document provides an introduction to HTML and covers several basic HTML elements for formatting text. It discusses headings, paragraphs, breaks, and horizontal rules. It also covers setting document properties like background color and text color. Character formatting elements are introduced like bold, italics, font size, color, and alignment. The document recommends starting with a basic HTML template and provides examples of coding structures for the various elements.
This document provides an introduction to HTML and covers several basic elements for formatting text in HTML documents, including:
1. Headings (<H1>-<H6>) are used to divide up sections of text and are displayed in decreasing font sizes. Paragraphs (<P>) allow text to automatically wrap to the width of the browser.
2. Breaks (<BR>) insert line breaks, while horizontal rules (<HR>) add horizontal lines across the page.
3. Character formatting elements like <B> for bold, <I> for italics, and <FONT> for changing text size allow styling of individual characters.
This document provides an introduction to HTML and covers various topics related to creating HTML documents, including:
1. Definitions of key terms like HTML, URL, and browser.
2. How to create a basic HTML document structure and set document properties like the background color.
3. How to add different elements like headings, paragraphs, breaks, and horizontal rules to structure the content and text.
This document provides an introduction to HTML and covers several key topics:
1. It defines important terms like HTML, URL, and browser.
2. It discusses the basic structure of an HTML document including the <head> and <body> sections and common tags like <title> and <p>.
3. It covers ways to format text including headings, paragraphs, breaks, horizontal rules, bold, italics, underline, and font colors. It also discusses alignment and special characters.
This document provides an introduction to HTML and covers several key topics:
1. It defines important terms like HTML, URL, and browser.
2. It discusses the basic structure of an HTML document including tags, headings, paragraphs, and breaks.
3. It covers how to set document properties like the background color, text color, and link colors.
4. It explains how to preview and view HTML documents in a browser and engage in the edit-save-view cycle of creating webpages.
This document provides an introduction to HTML and covers several key topics:
1. It defines important terms like HTML, URL, and browser.
2. It discusses the basic structure of an HTML document including the <head> and <body> tags.
3. It covers how to set document properties like the background color and text color in the <body> tag.
4. It explains different text formatting tags like <b> for bold, <i> for italics, and <font> for changing text size or color.
web development html css javascrptt902350_HTML_Jar.pptPuniNihithasree
This document provides an introduction to HTML and covers several key topics:
1. It defines important HTML terms like HTML, URL, and browser.
2. It discusses HTML tags, including common tags like <TITLE> and <BODY>, and explains that tags are not case sensitive.
3. It covers choosing a text editor for writing HTML, and recommends NotePad for beginners to create basic HTML pages and view them in a browser.
This document provides an introduction to HTML and covers various topics related to creating HTML documents, including:
1. Definitions of key terms like HTML, URL, and browser.
2. How to create a basic HTML document structure and set document properties using tags like <HTML>, <HEAD>, <TITLE>, and <BODY>.
3. How to add headings, paragraphs, breaks, and horizontal rules to structure content on the page.
4. How to format text using bold, italics, and other tags.
In summary, the document serves as a tutorial for beginners on the basic building blocks of creating HTML pages.
This document provides an introduction to HTML and covers several key topics:
1. It defines important HTML terms like HTML, URL, and browser.
2. It discusses HTML tags, including common tags like <TITLE> and <BODY>, and explains that tags are not case sensitive.
3. It covers choosing a text editor for writing HTML, and recommends NotePad for beginners to create basic HTML pages and view them in a browser.
This document provides an introduction to HTML and covers various topics related to creating HTML documents, including:
1. Definitions of key terms like HTML, URL, and browser.
2. How to create a basic HTML document structure and set document properties using tags like <HTML>, <HEAD>, <TITLE>, and <BODY>.
3. How to format text within HTML documents using tags like <H1>-<H6> for headings, <P> for paragraphs, <BR> for breaks, and <HR> for horizontal rules.
Web development and web design with seoRajat Anand
Happy to Help is a website that aims to provide household services like plumbing and electricians to users by connecting them directly to local service providers. The website allows users to find and book these small household services from the comfort of their home by selecting their location and desired service on the website. It provides contact information of different pre-screened service providers to make the process easy for users. The website aims to enhance communication between users and service providers through its online platform.
HTML5 is the newest version of HTML that adds new semantic elements, built-in audio and video playback, and features like the canvas element for drawing graphics. It simplifies the syntax of earlier HTML versions and aims to make web pages more semantic, reduce the need for plugins, and work across devices. New elements in HTML5 include <header>, <footer>, <nav>, <video>, <audio>, <canvas>, and new form input types. It is still a work in progress with partial browser support.
The document discusses the features of HTML5 including:
1) New elements such as <video>, <audio>, and <canvas> that allow embedding multimedia directly into webpages.
2) Block-level elements like <article>, <section>, <aside>, <header>, <footer>, and <nav> that help define page structure and outlines.
3) Associated technologies enabled by HTML5 including geolocation, offline storage, and CSS3 features for animations, gradients and rounded corners.
Attached is a joint letter to Capitol Hill to advocate for increased.docxjaggernaoma
Attached is a joint letter to Capitol Hill to advocate for increased funding of the Public Health and Social Services Emergency Fund which included funding for nurses that are furloughed. Also, a type of reward that ANA is advocating for during Mental Health Month there is a call for legislative support for hazard pay and mental health services for nurses.
https://www.nursingworld.org/practice-policy/work-environment/health-safety/disaster-preparedness/coronavirus/what-you-need-to-know/legislative-and-regulatory-advocacy/covid-19-legislative-regulatory-and-advocacy-update/
What should nurses do to support each other and the professions during the COVID-19 pandemic?
.
Attached is a copy of an interview done with a Tribal member regardi.docxjaggernaoma
Attached is a copy of an interview done with a Tribal member regarding the issue of Tribal sovereignity. It needs to be restructured into something that resembles a newspaper article or reflection essay. The emphasis would be on five questions within the piece that discuss Tribal sovereignity, and the answers to same based on the entire document. The document needs to be approx. 2 pages, #12 font, double spaced. It needs to be completed by Tuesday afternoon. That would be tomorrow.
.
Attached Files Week 5 - trace IP Physical Location.rtf (38..docxjaggernaoma
Attached Files:
Week 5 - trace IP Physical Location.rtf
(38.189 KB)
Lab WK 5
Scenario:
You are the cybersecurity expert for a government organization. There is great concern that hackers from another country will infiltrate the government network by using a phishing attack to interfere with our election process. One member send you an email that looks suspicious, in oder to provide law enforcement with as much information as possible you decide to track the sender.
You may use the attached email (.txt) the senders IP is highlighted or choose one from your own email
Trace the IP
to get a physical address (starting point)
Share any other information you find that may be relevant to law enforcement
Short Guides - You may need Google "how to view the source code for your specific" device, browser etc... also works on email that are not saved on your device.
Mac
Outlook (Windows)
.
Attached here is a psychology article I need to be summarized. Pleas.docxjaggernaoma
Attached here is a psychology article I need to be summarized. Please also follow attached rubric. Your summary should use
Study 2 (ONLY)
or EXPERIMENT 2 ONLY
of the Sherman, Haidt, and Cohen (2009) article and follow the format of the sample provided. Remember that your summary should be in your own words. Also follow attached instructions.
.
Attached Files:
News Analysis Sample.docx
News Analysis Sample.docx - Alternative Formats
(18.027 KB)
News Analysis #1_sample.docx
News Analysis #1_sample.docx - Alternative Formats
(17.771 KB)
This assignment fulfills/supports
Module Outcome: You will have discuss how prejudice, stereotypes, and racism help to perpetuate disadvantage for less powerful groups.
Course Outcome: You will identify and describe key social problems and proposed solutions.
Education Competency: You will demonstrate socialization skills that support cultural awareness and a global perspective.
The Assignment
Watch/browse a newscast and write a report containing the following:
Name, date, and time of newscast.
The top five stories of the day
A 3-5 sentence paragraph summarizing a story of interest shown during the newscast.
Share 3-5 sentences of your personal reaction to the story.
Apply
five
key concepts covered in the chapters of the module discussed during the story. Include a definition of each concept and provide a
quote
from the newscast to illustrate the concept. See the course outline for the due date for each analysis.
Resources
Student Submission of Safe Assignment
SafeAssign: Student Guide
Acceptable Length
You analysis should be no more than two pages.
Formatting Requirements
Put your name, course and section number, and assignment title at the top of the document.
Use one-inch margins.
Use a 12-point Times New Roman font.
Use double line spacing in the document.
Grading Criteria
The overall score noted in a SafeAssign originality report is an indicator of the percentage of the submitted paper matching existing sources. This score is a warning indicator only and papers should be reviewed to see if the matches are properly attributed.
Scores below 15 percent: These papers typical include some quotes and few common phrases or blocks of text that match other documents. These papers typically do not require further analysis, as there is no evidence of plagiarism in these papers.
Scores between 15 percent and 40 percent: These papers include extensive quoted or paraphrased material or they may include plagiarism. These papers should be reviewed to determine if the matching content is properly attributed.
Scores over 40 percent: There is a very high probability that text in this paper was copied from other sources. These papers likely include quoted or paraphrased text in excess and should be reviewed for plagiarism.
.
Attached Files:
SOC-220_SOCIAL PROBLEMS PRESENTATION_Sample.pptx
SOC-220_SOCIAL PROBLEMS PRESENTATION_Sample.pptx - Alternative Formats
(1.525 MB)
SOC 220 common presentation assignment rurbic.docx
SOC 220 common presentation assignment rurbic.docx - Alternative Formats
(18.424 KB)
Power Point Assignment Rubric and List of Social Problems are attached:
Social Problems Presentation Instructions
Introduction
This assignment will investigate the concepts covered in this course and allow you to use policy evaluation, cultural values, and political outlook to discuss it.
This assignment fulfills/supports
Module Outcome: You will define how prejudice, stereotypes, and racism help to perpetuate disadvantage for less powerful groups.
Course Outcome #2: You will identify and describe key social problems and proposed solutions.
General Education Competency #1: You will use critical thinking skills that support cultural awareness and a global perspective.
The Project Assignment:
As a journalist or researcher, create a 1-2 minute commercial OR 15-22 Power Point Presentation on an international (I ask that you limit your topics to non-American social problems) social problem to be shown during the news. This information should be compiled into a commercial presentation using power point slides, Flipgrid, Animoto, or Powtoon.
You must answer the following questions by also providing a typed summary in MSWord format answering the following questions if you are providing a 1-2 min. commercial. If choosing a power point presentation, please make sure theses questions are included in your presentation with answers- detailed and comprehensive, using 3 academic sources (min.) or more if needed:
Topic selection and explanation for choosing the topic
. Select a problem in another country. Since there are literally hundreds of topics to choose from, I ask that you limit your topics to non-American social problems. Identify the problem. Provide some background and/or information concerning why you choose this particular topic. Be sure to discuss who is involved. (
0-15 points
)
Explain why the social problem is considered a serious issue
. Provide research within the past 5 years. Is the problem increasing, and if so, how and/or why? (
0-25 points
)
Acknowledge how this problem can be addressed from a journalist perspective.
What path would you take to bring light to the problem if you were a journalist for this story? For example, you may choose to focus on a specific region or topic. If you want to focus on a specific topic, some ideas for you to consider might be youth (toy soldiers, child labor), gender, rape, health, illness (AIDS), drug use (additional topics may be found under helpful information). Since there are literally hundreds of topics to choose from, I ask that you limit your topics to non-American social problems. (
0-20 points
)
Identify at least four sociological concepts related to this social problem.
You mu.
Attached below you will find the series of 4 questions. This assignm.docxjaggernaoma
This document provides instructions for an assignment due by Monday, April 14th at 11:00 PM Eastern Time. It requires answering 4 questions using APA formatting for in-text citations and references, and the student must reference the book "The American democracy" by Patterson as one of the sources. The document emphasizes that original work is required and no plagiarism is allowed.
Attached below isWEEK 4 As always, include references. As alwa.docxjaggernaoma
Attached below is:
WEEK 4: As always, include references. As always, no plagiarism, cite and list in apa format
Respond To Discussion Board: They are 2 discussion boards post below. read and Reply to each discussion post 100 words per each response so total 200words. Responses should demonstrate critical thinking and comprehension of the discussion topic and are strengthened when they are supported by additional research. You are expected to provide supporting details for your response; that support may come from the points covered in the readings and additional external research all source must be cited and listed (
appropriately cited
) in APA
.
Attached are two articles in one document. Write thoughtful resp.docxjaggernaoma
Attached are two articles in one document. Write thoughtful responses to the question about any one of the articles:
1. Expedia article: How did Expedia stay relevant or survive? What did their Usability Lab do? Describe A/B testing in simple words. 150-200 words.
2. Hidden Emotion article: summarize the techniques mentioned in this article. What are some limitaions of using them for decision making? 150-200 words.
.
Attached are the instructions to the assignment.Written Assign.docxjaggernaoma
This 3 sentence summary provides the high level information from the document:
The document contains instructions for a written assignment to develop a plan to calculate descriptive statistics and generate graphs and tables from a set of real world data, though only the plan is required and not the actual analysis.
Attached are the instructions and rubric! Research Paper #2.docxjaggernaoma
Attached are the instructions and rubric!
Research Paper #2
Choose any of the recent emerging / reemerging infectious disease discussed in your textbook (for example: Severe Acute Respiratory Syndrome (SARS – 2002-2003), Middle East Respiratory Syndrome Coronavirus (MERS-CoV)- 2015-2018), Avian influenza, H1N1 Influenza (Swine Flu) Pandemic – 2009-2010, Novel Avian influenza A (H7N9) Virus 2013-2017, West Nile Virus, Lyme Disease, Escherichia Coli, Tuberculosis, Ebola virus disease, Zika virus disease).
1. Introduce the disease
2. Mention signs, symptoms and diagnosis of the disease.
3. Outline the factors that may have contributed to the emergence or reemergence of this infectious diseases.
4. How would you prevent similar occurrence? Mention the goals of Health People 2020 to reduce this infection / Prevention and control of the disease / Infection Control Guidelines.
5. Is there a CDC priority for public health response to this specific infectious disease?
6. What is your thought about emerging antibiotic -resistant microorganisms?
7. What is your role as a community health nurse?
8. Mention research studies related with the topics discussed in your paper (mention at least 3 research studies in paper).
Research Assignment # 2
Purpose
The student will choose (1) of the recent emerging / reemerging infectious disease (some examples were provided) to develop the research project. Also, the student will use given questions to guide the paper.
General directions
1.
You will submit one (1) paper as part of this assignment (individual assignment).
2. Your research paper must follow APA format according to Publication Manual American Psychological Association (APA) (6th ed.). Include a cover page and headings per 6th edition APA guidelines.
3. The research paper should be minimum of 3 pages (not including the title or reference pages) – maximum of 6 pages (not including the title or reference pages), single spaced, Times New Roman, Size 12, and 5 references about the topic (3 must be peer-reviewed journal articles).
Research Paper
Include the following components:
1. Introduction of the disease
2. Mention signs and symptoms of the disease. How do you diagnose this infectious disease?
3. Outline the factors that may have contributed to the emergence or reemergence of this infectious diseases.
4. How would you prevent similar occurrence? Mention the goals of Health People 2020 to reduce this infection / Prevention and control of the disease / Infection Control Guidelines.
5. Is there a CDC priority for public health response to this specific infectious disease?
6. What is your thought about emerging antibiotic -resistant microorganisms?
7. What is your role as a community health nurse?
8. Mention research studies related with the topics discussed in your paper (mention at least 3 research studies in paper).
9. Conclusion
10. References Page
.
Attached are the guidelines for the Expertise Sharing Project. M.docxjaggernaoma
Attached are the guidelines for the Expertise Sharing Project.
My Topic:
Memory Enhancement Strategies
14-15 Slides of Content.
REQUIRED COURSE MATERIALS Required textbook: Slavin, R.E. (2018). Educational psychology: Theory and practice (12th ed.). Boston, MA: Pearson. ISBN- 9780134995199.
Other Required and/or Recommended Resource(s): Writing Style Formatting: APA Format: Where applicable, the use of APA 6th edition is required.
Course Objective 7 - List and describe steps and principles relevant to direct instruction as it relates to the teaching of concepts, skills, and attitudes including various modes of retention, forgetting, and transfer.
Course Objective 8 - Identify the key concepts of the constructivist theory of learning as they relate to cooperative learning, problem-solving and thinking skills
Course Objective 9 - Identify and describe characteristics of appropriate and effective learner-centered lessons and units that utilize grouping, differentiation, and technology.
Course Objective 10 - Describe different bases of motivation such as drives, needs, goals, interests, and achievement motivation; and discuss psychological principles and procedures for teachers to motivate learners and foster intrinsic motivation.
Course Objective 11 - Identify the components of an effective learning environment for all learners, including those with exceptionalities.
Course Objective 12 - Identify methods for teacher accountability and their relation to assessment methodologies
.
Attached are the documents needed to complete the assignment. The in.docxjaggernaoma
Attached are the documents needed to complete the assignment. The instrucions are are attached with an example of how to write the assignment. Also attached is an article that the student is required to write about. It is important that this is completed no later than thursday. I appreciate your help. Thank you
.
Attached are the 3 documents1. Draft copy submitted2. Sam.docxjaggernaoma
Attached are the 3 documents:
1. Draft copy submitted
2. Sample final paper from a different student for reference on how to write our proposed paper.
3. Comments suggested from Professor
** Need a Final paper based on the above suggestions/comments and samples - 1800words (300 WORDS each page * 6pages)
.
attached are directions needed to complete this essay! Please make s.docxjaggernaoma
This document provides instructions for an essay assignment, requiring the essay to answer all questions, be original as the teacher will check for plagiarism, and discuss the Apple iPhone as a topic while using sources. The essay must be completed by 5PM PST on 8/25 in APA format.
Attach is the checklist For this Assignment, write a 3 and half pa.docxjaggernaoma
Attach is the checklist
For this Assignment, write a 3 and half page paper, including reference page, describing an imaginary crime scene of a mass disaster and plan a team approach to the examination of that scene. Describe all of the appropriate specialized personnel that should be present at the scene/disaster and what they should contribute to the investigation.
Use materials from the text and/or any outside resources to support your response.
You may use the textbook as a source, along with personal interviews, . Follow American Psychological Association (APA) format with proper citations and references.
.
Attach and submit the final draft of your Narrative Essay. Remember .docxjaggernaoma
Attach and submit the final draft of your Narrative Essay. Remember that the file you attach should be named with your last name and the assignment title.
Make sure that your essay has the following:
1. An Introduction
2. A Thesis with a specific topic and comment that clearly states exactly what the point of the essay is. Remember for the Narrative Essay the thesis should indicate the specific event or incident and exactly what was learned.
3. Body paragraphs (generally 3 or more)
4. A Conclusion
5. A Heading
6. A Header
7. Double spacing
8. A Title
This essay is worth 75pts.
Attach a Word document.
.
Atomic Theory Scientists and Their ContributionsScientist .docxjaggernaoma
Atomic Theory Scientists and Their Contributions
Scientist (date)
Contribution(s)
Empedocles
(492 BCE and 432 BCE)
All matter is composed of four elements: fire, air, water, and earth. The ratio of these four elements determines the properties of the matter
Democritus
(460 BCE - 370 BCE)
Matter can be cut into its constituent parts, these parts still possess all the properties of the original matter. He named this “atomos”.
.
Atomic models are useful because they allow us to picture what is in.docxjaggernaoma
Atomic models are useful because they allow us to picture what is inside of an atom, something we will never be able to actually see. We're going to talk about two models, the Bohr model and the Quantum model. While we know that the Quantum model is the correct way to represent atoms, the Bohr model is still useful for a very basic understanding. Think of it as a stick figure sketch of an atom. The parts are all there, its just not quite filled in all of the way.
Bohr Model
The Bohr model of the atom was developed in 1914 by Niels Bohr. In this model, electrons move around the nucleus in fixed, concentric circles. Picture the planets orbiting the Sun. These circles are called energy levels and electrons must have a specific amount of energy to be in each level. The energy levels closest to the nucleus require the least amount of energy. In order for an electron to move further from the nucleus (or move up an energy level) they must gain energy. If they lose energy they fall down to an energy level closer to the nucleus.
Drawing the Bohr model for an atom gives you valuable information about the atom's valence electrons. The
valence electrons
--
those in the outermost energy leve
l--are the ones that determine the chemical properties of an atom. In order to draw a Bohr model you must first use the periodic table to tell you the number of protons, neutrons, and electrons in an atom. For Bohr models we usually draw what the "average" atom for that element looks like and just round the average atomic mass to a whole number and use that for the mass number.
Steps for Drawing a Bohr Model:
1. Count the number of protons, electrons, and neutrons for that atom.
2. Draw the nucleus. Indicate the correct number of protons and neutrons in the nucleus.
3. Draw energy levels around the nucleus, starting with the energy level closest to the nucleus. Fill up each energy level before moving on to the next.
Each energy level in a Bohr model can only hold a specific number of electrons, as shown in the table below.
Energy Level
Max # of electrons
1
2
2
8
3
18
4
32
For example, here is a Bohr model for the average oxygen atom:
Here is one for phosphorus:
You try drawing one for Magnesium (Mg) and for Boron (B). Count the number of electrons on the outermost energy level to find the number of valence electrons. Check your answers by looking at the handout.
Quantum Model
In 1925 the Quantum model of the atom was developed after it was determined that electrons can behave like a wave and a particle at the same time. In addition, you can't know the precise location of an electron. Instead of traveling in orderly circles around the nucleus, we describe the electrons as existing in a three-dimensional
electron cloud
--a shape surrounding the nucleus. You will learn more about the Quantum model in chemistry.
These are some of the orbital shapes possible in the first two energy levels of an atom.
Draw a Bohr model for elements wi.
Atoms and Electrons AssignmentLook at these websites to he.docxjaggernaoma
Atoms and Electrons Assignment
Look at these websites to help you understand chemical bonding which depends on the atomic structure. The electrons in the orbitals will be crucial to figuring out how atoms bond.
Do not cut and paste from the internet or book. Do not copy from a book or internet. Paraphrase all answers in your own words. No quotes. You must do the assignment by yourself without help from other students, friends, significant others.
Jefferson Lab Question and Answers about Atoms
Make sure you click on the links to learn more about atoms and electrons
Atomic Structure
Make sure you look at all the links on the right side from Overview to Compound Names
Periodic Table1
You can click on the kind of table information you need on the left.
Periodic Table 2
Chemical Bonding Websites to help answer Questions 2 and 3:
Chemical Bonding 1
Chemical Bonding 2
SEE ASSIGNMENT RUBRIC AT END OF PAGES FOR HOW TO MAXIMIZE POINTS.
Atoms and Electrons
Name: ______________________
1. Fill in the table below using the periodic table. (2pts)
Element
Atomic Number
Atomic Mass
# of Valence Electrons
# of Electrons needed to fill the outer shell
Chlorine
Potassium
Magnesium
Fluorine
Sodium
Nitrogen
Oxygen
Carbon
Iodine
Hydrogen
2.
Name each element based on the number of electrons. Use the periodic chart to help you name the elements. The full name of the element is below the symbol.
Type the name into the box below each drawing. (2 pts)
1. ___________ 2. ______________ 3. ____________
4. _____________ 5. _____________ 6. _______________
(next page)
3. a. Name one ionic compound you can form from the above elements. (1 pt)
b. Describe specifically how you would form that ionic compound. (be detailed! I want to know that you know how an ionic bond is formed) (2 pts)
4. a. Name one covalent compound you could form from the above elements. You may need more than one of the elements to complete the compound. (1 pt)
b. Describe specifically how these elements would form. (be detailed! I want to know that you know how a covalent bond is formed) (2 pts)
Assignment Rubric
Teacher Name: Mrs. Russell
CATEGORY
10-9 pts
8-7 pts
6-5 pts
Less than 5 pts
Amount of Information
All questions are addressed.
Most questions are addressed.
Some questions are addressed.
Many questions were not answered.
Questions #3 b and #4 b
All answers are fully detailed with information required in the question. Most answers will have at least 3 or more sentences.
All answers are detailed with information required in the question. Most answers will have 2 sentences.
Answers do not have enough information required in the question. Most answers will 1 sentence.
No answer to the questions.
Quality of Information
Information clearly relates to the main topic. It includes several supporting details and/or examples.
Informat.
This slide is special for master students (MIBS & MIFB) in UUM. Also useful for readers who are interested in the topic of contemporary Islamic banking.
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPRAHUL
This Dissertation explores the particular circumstances of Mirzapur, a region located in the
core of India. Mirzapur, with its varied terrains and abundant biodiversity, offers an optimal
environment for investigating the changes in vegetation cover dynamics. Our study utilizes
advanced technologies such as GIS (Geographic Information Systems) and Remote sensing to
analyze the transformations that have taken place over the course of a decade.
The complex relationship between human activities and the environment has been the focus
of extensive research and worry. As the global community grapples with swift urbanization,
population expansion, and economic progress, the effects on natural ecosystems are becoming
more evident. A crucial element of this impact is the alteration of vegetation cover, which plays a
significant role in maintaining the ecological equilibrium of our planet.Land serves as the foundation for all human activities and provides the necessary materials for
these activities. As the most crucial natural resource, its utilization by humans results in different
'Land uses,' which are determined by both human activities and the physical characteristics of the
land.
The utilization of land is impacted by human needs and environmental factors. In countries
like India, rapid population growth and the emphasis on extensive resource exploitation can lead
to significant land degradation, adversely affecting the region's land cover.
Therefore, human intervention has significantly influenced land use patterns over many
centuries, evolving its structure over time and space. In the present era, these changes have
accelerated due to factors such as agriculture and urbanization. Information regarding land use and
cover is essential for various planning and management tasks related to the Earth's surface,
providing crucial environmental data for scientific, resource management, policy purposes, and
diverse human activities.
Accurate understanding of land use and cover is imperative for the development planning
of any area. Consequently, a wide range of professionals, including earth system scientists, land
and water managers, and urban planners, are interested in obtaining data on land use and cover
changes, conversion trends, and other related patterns. The spatial dimensions of land use and
cover support policymakers and scientists in making well-informed decisions, as alterations in
these patterns indicate shifts in economic and social conditions. Monitoring such changes with the
help of Advanced technologies like Remote Sensing and Geographic Information Systems is
crucial for coordinated efforts across different administrative levels. Advanced technologies like
Remote Sensing and Geographic Information Systems
9
Changes in vegetation cover refer to variations in the distribution, composition, and overall
structure of plant communities across different temporal and spatial scales. These changes can
occur natural.
A review of the growth of the Israel Genealogy Research Association Database Collection for the last 12 months. Our collection is now passed the 3 million mark and still growing. See which archives have contributed the most. See the different types of records we have, and which years have had records added. You can also see what we have for the future.
How to Make a Field Mandatory in Odoo 17Celine George
In Odoo, making a field required can be done through both Python code and XML views. When you set the required attribute to True in Python code, it makes the field required across all views where it's used. Conversely, when you set the required attribute in XML views, it makes the field required only in the context of that particular view.
Main Java[All of the Base Concepts}.docxadhitya5119
This is part 1 of my Java Learning Journey. This Contains Custom methods, classes, constructors, packages, multithreading , try- catch block, finally block and more.
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxEduSkills OECD
Iván Bornacelly, Policy Analyst at the OECD Centre for Skills, OECD, presents at the webinar 'Tackling job market gaps with a skills-first approach' on 12 June 2024
How to Manage Your Lost Opportunities in Odoo 17 CRMCeline George
Odoo 17 CRM allows us to track why we lose sales opportunities with "Lost Reasons." This helps analyze our sales process and identify areas for improvement. Here's how to configure lost reasons in Odoo 17 CRM
Leveraging Generative AI to Drive Nonprofit InnovationTechSoup
In this webinar, participants learned how to utilize Generative AI to streamline operations and elevate member engagement. Amazon Web Service experts provided a customer specific use cases and dived into low/no-code tools that are quick and easy to deploy through Amazon Web Service (AWS.)
1. In Class Assignment 1
WebServices-CSET3200
September 28th, 2016
HTML & CSSWhat is Bootstrap?
· Bootstrap is a free front-end framework for faster and easier
web development
· Bootstrap includes HTML and CSS based design templates for
forms, buttons, tables, navigation, and many other, as well as
optional JavaScript plugins
· Bootstrap also gives you the ability to easily create responsive
designs
What is Responsive Web Design?
Responsive web design is about creating web sites, which
automatically adjust themselves to look good on all devices,
from small phones to large desktops.
Why Use Bootstrap?
Advantages of Bootstrap:
· Easy to use: Anybody with just basic knowledge of HTML and
CSS can start using Bootstrap
· Responsive features: Bootstrap's responsive CSS adjusts to
phones, tablets, and desktops
· Mobile-first approach: In Bootstrap 3, mobile-first styles are
part of the core framework
· Browser compatibility: Bootstrap is compatible with all
modern browsers (Chrome, Firefox, Internet Explorer, Safari,
and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web
site.
You can:
· Download Bootstrap from getbootstrap.com
· Include Bootstrap from a CDN
2. · There are several templates available including Portfolio
Template.
Quick Reminders:
* Browser opens the index page as the homepage automatically.
Three quick points before we go on to the next lesson:
1. What you made in lab 1 and 2 is a skeleton HTML document.
This is the minimum required information for a web document
and all web documents should contain these basic components.
2. The document title is what appears at the very top of the
browser window.
3. Of all the things on your web page, the title is what search
engines consider most when ranking a page. Choose your titles
carefully, and keep them brief.
IMPORTANT NOTE: Whenever you make a change to your
document, just save it, then hit the Refresh/Reload button on
your browser. In many instances, just hitting the refresh button
does not quite do the trick.
Agenda:
Today we will see and document the output/results we get after
writing these code snippets and different exercises.
The aim of today’s lab is to be able to communicate your
concept in a technical manner using the technical terminologies,
in addition to learning new skill set. You can earn up to 30
points at the completion of this lab.
In case you find it extremely hard to express a specific outcome
in words, then you are allowed to take a screen shot of the
outcome and submit it in your document. However, there is a
limit to screen shots. You can add a maximum of 7 images for
this lab.
Introduction to Nav Area:
1. In an html file, add the following snippets in the body
section.
3. 2. Add the following for Styling:
3. State the major differences you have noticed so far.
<body bgcolor="#ccffcc">
Something really cool
</body>
#ccffcc is computerese (the symbols and rules of a computer
programming language) for light green.
You can specify a background image instead. (Note the image
should be in the same folder as your HTML file.)
<body background="swirlies.gif">
Something really cool.
</body>
4. State the outcome you have noticed so far.
<body background="bluebar.gif">Something really
cool.</body>
Save in the same folder you saved page1.html.
In order to have a fixed background and the page that just
scrolls over it, you can add the following:
style="background-attachment:fixed" to the <body>
tag...<body background="mybackground.gif"
style="background-attachment:fixed">
5. State the major differences you have noticed so far.
We can make things bold.<body>Something really
4. <b>cool</b></body>Something <i>really</i> <b>cool</b>
We can use tags in combination if we wish to do
so.<body>Something really <i><b>cool</b></i></body>
This is an example of nested tags.
6. State the major differences you have noticed so far.
We can change the font size too... It is super
easy!<body>Something really <font
size="6">cool</font></body>
The font will only display if your visitor has that font installed
on their computer. If the person looking at the page doesn't have
installed on their computer the font you specify, then they will
only see the default font. So be very judicious in your use of
fonts. Arial and Comic Sans MS are widely distributed with
Windows. You can hedge your bets a little by specifying more
than one font.
<font face="arial,helvetica,lucida sans">Hidee Ho</font>
7. State the major differences you have noticed so far.
Q. What are some common fonts that are on *most* computers
and are pretty safe bets?
Arial
Arial Black
Arial Narrow
Bookman Old Style
Century Gothic
Comic Sans MS
Courier New
Georgia
Impact
Lucida Console
Tahoma
Times New Roman
Trebuchet MS
Verdana
** A handy way to make big or small text is the big tag and
5. the small tag.<body><big>Something</big> really
<small>cool</small></body>
big bumps the text up one size, small bumps it down one size.
** We can, of course use more than one attribute in
a <font> tag.<body>Something really <font color="#ff0000"
face="arial" size="7">cool</font></body><body
bgcolor="#ccffcc">Something really <u><i><b><font
color="#ff0000" face="arial"
size="7">cool</font></b></i></u></body>
8. State the output.
** Section headings come in sizes 1-6.
A useful heading attribute is align. <h2 align="left">Something
really cool</h2><h2 align="center">Something really
cool</h2><h2 align="right">Something really cool</h2>
The browser has default settings for text color, link color,
active link color and visited link color in addition to the
background color. The defaults are as follows:
Background is usually white
Text is usually black
Links are usually blueVisited links are usually purpleActive
links are often red
: a link when it has focus, either by clicking on it or tabbing to
it.
You can change these defaults for the entire document in
the <body> tag.<body bgcolor="#000000" text="#ffff66"
link="#00ff33" vlink="#00bb33" alink="#00ddff">Something
really cool</body>
9. State the major differences you have noticed so far.
10. You could even make a rollercoaster!You could even make
a
<fontsize="3">r</font><fontsize="4">o</font><fontsize="4">l
</font><fontsize="5">l</font><fontsize="6">e</font><fontsize
="7">r</font><fontsize="7">c</font><fontsize="6">o</font><f
ontsize="5">a</font><fontsize="4">s</font><fontsize="3">t</f
ont><fontsize="2">e</font><fontsize="1">r!</font>
Or a RAINBOWOr a <b><font
6. color="#ee0000"size="5">R</font><font
color="#ff7700"size="5">A</font><font
color="#eeee00"size="5">I</font><font
color="#00bb00"size="5">N</font><font
color="#0000ee"size="5">B</font><font
color="#dd00dd"size="5">O</font><font
color="#880088"size="5">W</font></b>
11. State the amazing differences you have noticed so far.
Remember: You can view the HTML code of any page you
happen to be viewing by choosing View/Document Source in
your browser. Your browser may word this a little differently,
but nearly all browsers have this facility. <body><p
align="left">Something really cool</p><p align="center">like
an icecube</p><p align="right">or a popsicle</p>
12. State the major differences you have noticed so far.
** A nifty little code that means "space" to the browser:
The & means we are beginning a special character, the; means
ending a special character, and the letters in between are sort of
an abbreviation. There are quite a few of these special
characters. Here are five more. (Note: these should always be
lower case.)
non-breaking space
< < less-than symbol
> > greater-than symbol
& & ampersand
" " quotation mark
** We must also specify the source and the size.<body><img
src="chef.gif" width="130" height="101"></body>
Another method is to use a text or html editor that imports the
size when you insert the image. NoteTab, and an image tag of
your design is built for you when you simply drag the filename
on to the current file. You can insert an image in about 6 tenths
of a second.
++++++++++++++++++++++++++++++++++++++++++
8. float: right;
}
13. State the major differences you have noticed so far.
+++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++
<!-- HTML file: -- >
<!DOCTYPE html>
<HTML lang="en-US">
<HEAD>
<TITLE> Divs in HTML and CSS </TITLE>
<META charset="utf-8" />
<META name="keywords" content="" />
<META name="description" content="" />
<link rel="stylesheet" href="Stylesheet.css"
type="text/css" />
</HEAD>
<BODY>
<div id="wrapper">
<div id="header">Header</div>
<div id="menu">This is the menu</div>
<div id="content">This is content</div>
</div>
</BODY>
</HTML>
14. State the major differences you have noticed so far.
+++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++
How to create TABLES
<!-- CSS file
table#sample {
border-style: solid;
border-width: thin;
10. +++++
<!-- HTML file: -- >
<!DOCTYPE html>
<HTML lang="en-US">
<HEAD>
<TITLE> Table styling CSS </TITLE>
<META charset="utf-8" />
<META name="keywords" content="" />
<META name="description" content="" />
<link rel="stylesheet" href="Stylesheet.css"
type="text/css" />
</HEAD>
<BODY>
<table id="sample">
<tr>
<th class="tableheader"> Heading 1 </th>
<th class="tableheader"> Heading 2 </th>
</tr>
<tr>
<td class="tdgrey"> Data 1 </td>
<td class="tdgrey"> Data 2 </td>
</tr>
<tr>
<td class="tdwhite"> Data 1 </td>
<td class="tdwhite"> Data 2 </td>
</tr>
</table>
</BODY>
</HTML>
16. State the major differences you have noticed so far.
+++++++++++++ Second way ++++++++++++++++
<HEAD>
<TITLE> Table styling CSS </TITLE>
<META charset="utf-8" />
11. <style>
table, th, td {
border:1px solid black;
<!-- border-collapse: collapse; -->
}
Table {
width: 500 px;
}
</HEAD>
17. State the major differences you have noticed so far.
+++++++++++++ Link Styles ++++++++++++++++
The order matters here.
1. a: link {
color: red;
}
2. a: visited {
color: brown;
}
3. a: hover {
color: orange;
}
4. a: active {
color: green;
}
18. State the amazing differences you have noticed so far.
+++++++++++++ NAV Bar and Styles ++++++++++++++++
<!-- CSS file: -- >
#nav {
list-style-type: none;
padding: 0px;
12. width: 840px;
}
.linav {
float: left;
}
a.nav:link, a.nav:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFF;
background-color: #999;
text-align: center;
padding: 5px;
}
a.nav:hover, a.nav:active {
background-color: #CCC;
}
19. State what you see on screen.
++++++++++++++++++++++++++++++++++++++++++++++
<!-- HTML file: -- >
<!DOCTYPE html>
<HTML lang="en-US">
<HEAD>
<TITLE> HTML and CSS navigation bar </TITLE>
<META charset="utf-8" />
<META name="keywords" content="" />
<META name="description" content="" />
<link type="text/css" rel="stylesheet"
href="Stylesheet.css" type="text/css" />
</HEAD>
<BODY>
<ul id="nav">
<li class="linav"><a href="#"
13. class="nav">HOME</a></li>
<li class="linav"><a href="#"
class="nav">ABOUT</a></li>
<li class="linav"><a href="#"
class="nav">NEWS</a></li>
<li class="linav"><a href="#"
class="nav">CONTACT</a></li>
</ul>
<p class= " main-class" > Style for paragraph goes here </p>
</BODY>
</HTML>
20. State the output.
++++++++++++++++++++++++++++++++++++++++++++
Remember, Styling could be Block level or Inline styling.
+++++++++++++ Box Model ++++++++++++++++
Check out the screen resolution on your machine.
Control Panel > Display > Resolution> Screen Resolution
W X H = 1260 px X 650 px, could be an estimated size of your
screen.
<div id=" div1"> The div tag </div>
Or
<head>
<!-- for your assignment <link rel="stylesheet" href="
style.css"> -->
<style>
div {
color: red;
background-color: lightblue;
width: 300 px;
height: 300 px;
margin: 500 px;
14. }
</style>
</head>
21. Explain the output. The CSS Box Model --- M B P
C
As per W3School, 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 every
HTML element. It consists of: margins, borders, padding, and
the actual content. The image below illustrates the box model:
Explanation of the different parts:
· 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
The box model allows us to add a border around elements, and
to define space between elements.
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding +
left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding +
top border + bottom border + top margin + bottom margin
<! DOCTYPE html>
<html>
<head>
15. <style>
div {
background-color: lightblue;
width: 200px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</div>
</body>
</html>
22. State the output.
+++++++++++++++++++++++++++++++++++++++++++++++
+++
<style>
p{ outline-color: red;
outline-style:dotted;
/* outline-style: double; */
outline-width: 10px;
text-indent: 20px;
}
</style>
23. State the major differences you have noticed so far.
<! DOCTYPE html>
16. <html>
<head>
<style>
h1{ text-transform:uppercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
24. State the major differences you have noticed so far.
+++++++++++++++++++++++++++++++++++++++++++++++
+++
</body>
</html>
25. State the output.
In the Body Section,
26. State the output.
17. +++++++++++++++++++++++++++++++++++++++++++++++
+++
Q. How to float block elements?
Values
left
Is a keyword indicating that the element must float on the left
side of its containing block.
right
Is a keyword indicating that the element must float on the right
side of its containing block.
none
Is a keyword indicating that the element must not float.
inline-start
Is a keyword indicating that the element must float on the start
side of its containing block, that is the left side on ltr scripts
and the right side on rtl scripts.
inline-end
Is a keyword indicating that the element must float on the end
side of its containing block, that is the right side on ltr scripts
and the left side on rtl scripts.
Example Styling Sheet
// Generals
body
padding: 80px
hr
margin: 50px
clear: both
border-color: #ccc
18. img
vertical-align: baseline
.show-bg
background: pink
padding: 20px
box-shadow: 0px 0px 0px 20px orange inset
font-size: 0
border: 4px solid #FF4136
.box
+size(100px)
background: lightblue
.box-wide
background: lightblue
height: 100px
width: 100%
// Floats
.float-left
float: left
margin: 0 10px 10px 0
.float-right
float: right
margin: 0 0 10px 10px
// Clear //; to clean up floats.
.clear
clear: both
The simplest way to clear the floats in this example is to add
the clear property.
HTML
19. <hr>
<h1>Many floats, No words + invisible non floating clearing
object</h1>
<div class="show-bg">
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="float-left box"></div>
<div class="clear"></div>
</div>
<p> Paste any Paragraph of 3-4 lines here to see the difference.
</p>
<hr>
27. State the output.
Other Examples of internal Styling sheet.
Positioninginclude fixed, absolute, relative, static, initial.
20. 28. State the output.
Add some different background-color for div#block3
Add in few more div ids.
</div> <!-- end of block container -->
29. State the major differences you have noticed so far.
Try both left and right, one after the other:
float : left;
All the divs are now side by side. If the div has concealed some
pre-existing element, simply add in the following line after
padding declaration.
overflow: hidden;
}
30. State the major differences you have noticed so far.
+++++++++++++++++++++++++++++++++++++++++++++++
+++