New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here

New Tech Cmptr Systems

by: Mrs. Rosemarie Kertzmann

New Tech Cmptr Systems ECET 445

Mrs. Rosemarie Kertzmann
Purdue University Calumet
GPA 3.76

Omer Farook

Almost Ready


These notes were just uploaded, and will be ready to view shortly.

Purchase these notes here, or revisit this page.

Either way, we'll remind you when they're ready :)

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Omer Farook
Class Notes
25 ?




Popular in Course


This 0 page Class Notes was uploaded by Mrs. Rosemarie Kertzmann on Sunday November 1, 2015. The Class Notes belongs to ECET 445 at Purdue University Calumet taught by Omer Farook in Fall. Since its upload, it has received 9 views. For similar materials see /class/232686/ecet-445-purdue-university-calumet in ELECTRICAL AND COMPUTER ENGINEERING at Purdue University Calumet.

Similar to ECET 445 at Purdue University Calumet



Reviews for New Tech Cmptr Systems


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 11/01/15
PURDUE m C A L U M E T w 445 D amic Data Distribution S stem Desi n Lecture No 4 Notes Basics of HTML cont Reading Assignment Site http wwww3schoolscomhtm L Attributes provide additional information about HTML elements HTML Attributes HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in namevalue pairs like namequotvaluequot Attribute Example HTML links are de ned with the ltugt tag The link address is provided as an uttributeEdepIe lta hrefquothttpwwww3schoolscomquotgtThis is a inkltagt Always Quote Attribute Values Attribute values should always be enclosed in quotes Double style quotes are the most common but single style quotes are also allowed In some rare situations like when the attribute value itself contains quotes it is necessary to use single quotes name39John quot ShotGunquot Nelson HTML Tip Use Lowercase Attributes Attribute names and attribute values are caseinsensitive However the World Wide Web Consortium W3C recommends lowercase attributes attribute values in their HTML 4 recommendation Newer versions of XHTML will demand lowercase attributes HTML Attributes Reference Below is a list of some attributes that are standard for most HTML elements Attribute Value Description class classrule or stylerule The class of the element lid idname A unique id for the element style styledefinition An inline style definition title tooltiptext A text to display in a tool tip HTML Headings Headings are defined with the lth1gt to lth6gt tags lth1gt defines the largest heading lth6gt defines the smallest heading Examples lth1gtThis is a headinglth1gt lth2gtThis is a headinglth2gt lth3gtThis is a headinglth3gt Note Browsers automatically adds an empty line before and after headings Headings Are Important Use HTML headings for headings only Don t use headings to make text BIG or hold Search engines use your headings to index the structure and content of your web pages Since users may skim your pages by its headings it is important to use headings to show the document structure H1 headings should be used as main headings followed by H2 headings then less important H3 headings and so on HTML Rules Lines The lthr gt tag is used to create an horizontal rule line Example ltpgtThis is a paragraphltpgt lthr gt ltpgtThis is a paragraphltpgt lthr gt ltpgtThis is a paragraphltpgt HTML Comments Comments can be inserted in the HTML code to make it more readable and understandable Comments are ignored by the browser and are not displayed Comments are written like this Example lt This is a comment gt Note There is an exclamation point after the opening bracket but not before the closing bracket HTML Tip How to View HTML Source Have you ever seen a Web page and wondered quotHey How did they do thatquot To nd out click the VIEW option in your browser39s toolbar and select SOURCE or PAGE SOURCE This will open a window that shows you the HTML code of the page HTML Tag Reference W3Schools39 tag reference contains additional information about these tags and their attributes You will learn more about HTML tags and attributes in the next chapters of this tutorial Tag Description ilthtmlgt De nes an HTML document lltbodygt De nes the document39s body lthlgt to lth6gt De nes header 1 to header 6 llthrgt De nes a horizontal rule De nes a comment HTML documents are diVided into paragraphs HTML Paragraphs Paragraphs are de ned with the ltpgt tag Example ltpgtThis is a paragraphltpgt ltpgtThis is another paragraphltpgt Note Browsers automatically adds an empty line before and after paragraphs Don 39t Forget the End Tag Most browsers will display HTML correctly even if you forget the end tag Example ltpgtThis is a paragraph ltpgtThis is another paragraph The example above will work in most browsers but don t rely on it Forgetting the end tag can produce unexpected results or errors Note Future version of HTML will not allow you to skip end tags HTML Line Breaks Use the ltbr gt tag if you want a line break a new line without starting a new paragraph Example ltpgtThis isltbr gta paraltbr gtgraph with line breaksltpgt The ltbr gt element is an empty HTML element It has no end tag ltbrgt or ltbrgt In XHTML XML and future versions of HTML HTML elements with no end tag closing tag are not allowed Even if ltbrgt works in all browsers writing ltbr gt instead is more future proof HTML Output Useful Tips You cannot be sure how HTML will be displayed Large or small screens and resized windows will create different results With HTML you cannot change the output by adding extra spaces or extra lines in your HTML code The browser will remove extra spaces and extra lines when the page is displayed Any number of lines count as one space and any number of spaces count as one space HTML Tag Reference W3Schools39 tag reference contains additional information about HTML elements and their attributes Tag Description 33 De nes a paragraph Inserts a single line break HTML Text Formatting lthtmlgtltbodygt ltpgtltbgtThis text is boldltbgtltpgt ltpgtltbiggtThis text is bigltbiggtltpgt ltpgtltigtThis text is italicltigtltpgt ltpgtltcodegtThis is computer outputltcodegtltpgt ltpgtThis isltsubgt subscriptltsubgt and ltsupgtsuperscriptltsupgtltpgt ltbodygt lthtmlgt HTML Formatting Tags HTML uses tags like ltbgt and ltigt for formatting output like bold or italic text These HTML tags are called formatting tags Refer to the bottom of this page for a complete reference HTML LINKS A link is the quotaddressquot to a document or a resource on the web Hyperlinks Anchors and Links In web terms a hyperlink is a reference an address to a resource on the web Hyperlinks can point to any resource on the web an HTML page an image a sound file a movie etc An anchor is a term used to define a hyperlink destination inside a document The HTML anchor element ltagt is used to de ne both hyperlinks and anchors We will use the term HTML link when the ltagt element points to a resource and the term HTML anchor when the ltagt elements de nes an address inside a document An HTML Link Link syntax lta hrefquoturlquotgtLink textltagt The start tag contains attributes about the link The element content Link text de nes the pa1t to be displayed Note The element content doesn t have to be text You can link from an image or any other HTML element The hrefAttribute The href attribute de nes the link quotaddressquot This ltagt element de nes a link to W3Schools lta hrefquothttpwwww3schoolscomquotgtVisit W3Schoolsltagt The target Attribute The target attribute de nes where the linked document will be opened The code below will open the document in a new browser window lta hrefhttpwwww3schoolscom targetquot7blankquotgtVisit W3Schoolsltagt The name Attribute When the name attribute is used the ltagt element de nes a named anchor inside a HTML document Named anchor are not displayed in any special way They are inVisible to the reader Named anchor syntax lta namequotlabelquotgtAny contentltagt The link syntax to a named anchor lta hrefquotlabelquotgtAny contentltagt The Image Tag and the SrcAttribute In HTML images are de ned with the ltimggt tag The ltimggt tag is empty which means that it contains attributes only and it has no closing tag To display an image on a page you need to use the src attribute Src stands for quotsourcequot The value of the src attribute is the URL of the image you want to display on your page The syntax of de ning an image ltimg srcquoturlquot gt The URL points to the location where the image is stored An image named quotboatgifquot located in the directory quotimagesquot on quotwwww3schoolscomquot has the URL httpwwww3schoolscomimagesboatgif The browser puts the image where the image tag occurs in the document Ifyou put an image tag between two paragraphs the browser shows the rst paragraph then the image and then the second paragraph The AItAttribute The alt attribute is used to de ne an quotalternate textquot for an image The value of the alt attribute is an authorde ned text The quotaltquot attribute tells the reader what he or she is missing on a page if the browser can t load images The browser will then display the alternate text instead of the image It is a good practice to include the quotal quot attribute for each image on a page to improve the display and usefulness of your document for people who have textonly browsers Image Tags iTag Description ltimggt Defines an image ltmaQgt Defines an image map ltareagt Defines a clickable area inside an image map i Tables Tables are de ned with the lttablegt tag A table is divided into rows with the lttrgt tag and each row is diVided into data cells with the lttdgt tag The letters td stands for quottable dataquot which is the content of a data cell A data cell can contain text images lists paragraphs forms horizontal rules tables etc lttable borderquotlquotgt lttrgt lttdgtrow 1 cell llttdgt lttdgtrow 1 cell 2lttdgt lttrgt lttrgt lttdgtrow 2 cell llttdgt lttdgtrow 2 cell 2lttdgt lttrgt lttablegt How it looks in a browser row 1 cell 1 row 1 cell 2 row 2 cell 1 row 2 cell 2 Tables and the Border Attribute If you do not specify a border attribute the table will be displayed without any borders Sometimes this can be useful but most of the time you want the borders to show To display a table with borders you will have to use the border attribute lttable borderquotlquotgt lttrgt lttdgtRow 1 cell llttdgt lttdgtRow 1 cell 2lttdgt lttrgt lttablegt Headings in a Table Headings in a table are de ned with the ltthgt tag lttable borderquotlquotgt lttrgt ltthgtHeadingltthgt ltthgtAnother Headingltthgt lttrgt lttrgt lttdgtrow 1 cell llttdgt lttdgtrow 1 cell 2lttdgt lttrgt lttrgt lttdgtrow 2 cell llttdgt lttdgtrow 2 cell 2lttdgt lttrgt lttablegt How it looks in a browser Heading Another Heading row 1 cell 1 row 1 cell 2 row 2 cell 1 row 2 cell 2 Empty Cells in a Table Table cells with no content are not displayed very well in most browsers lttable borderquotlquotgt lttrgt lttdgtrow 1 cell llttdgt lttdgtrow 1 cell 2lttdgt lttrgt lttrgt lttdgtrow 2 cell llttdgt lttdgtlttdgt lttrgt lttablegt How it looks in a browser row 1 cell 1 row 1 cell 2 row 2 cell 1 Note that the borders around the empty table cell are missing NB Mozilla Firefox displays the border To avoid this add a nonbreaking space ampnbsp to empty data cells to make the borders Visible lttable borderquotlquotgt lttrgt lttdgtrow 1 cell llttdgt lttdgtrow 1 cell 2lttdgt lttrgt lttrgt lttdgtrow 2 cell llttdgt lttdgtampnbsplttdgt lttrgt lttablegt How it looks in a browser row 1 cell 1 row 1 cell 2 row 2 cell 1 2 HTML Lists HTML supports ordered unordered and de nition lists HTML Lists This is the rst This is the second a This is the third Unordered Lists An unordered list is a list of items The list items are marked with bullets typically small black circles An unordered list starts with the ltulgt tag Each list item starts with the ltligt tag ltugt ltigtCoffeeltigt ltigtMikltigt ltugt Here is how it looks in a browser Coffee Milk Inside a list item you can put paragraphs line breaks images links other lists etc Ordered Lists An ordered list is also a list of items The list items are marked with numbers An ordered list starts with the ltolgt tag Each list item starts with the ltligt tag ltolgt ltigtCoffeeltigt ltigtMikltigt ltogt Here is how it looks in a browser 1 Coffee 2 Milk Inside a list item you can put paragraphs line breaks images links other lists etc De nition Lists A de nition list is not a list of single items It is a list of items terms with a description of each item term A de nition list starts with a ltdlgt tag de nition list Each term starts with a ltdtgt tag de nition term Each description starts with a ltddgt tag de nition description ltdlgt ltdtgtCoffeeltdtgt ltddgtBlack hot drinkltddgt ltdtgtMikltdtgt ltddgtWhite cold drinkltddgt ltdlgt Here is how it looks in a browser Coffee Black hot drink Milk White cold drink Inside the ltddgt tag you can put paragraphs line breaks images links other lists etc List Tags Tag Description lltogt Defines an ordered list l lltulgt Defines an unordered list Hi Defines a list item yltdgt Defines a definition list ltdtgt Defines a term an item in a definition list lltddgt Defines a description of a term in a definition list lltdirgt Deprecated Use ltulgt instead l r ltltmenugt Deprecated Use ltulgt Instead


Buy Material

Are you sure you want to buy this material for

25 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."

Allison Fischer University of Alabama

"I signed up to be an Elite Notetaker with 2 of my sorority sisters this semester. We just posted our notes weekly and were each making over $600 per month. I LOVE StudySoup!"

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."

Parker Thompson 500 Startups

"It's a great way for students to improve their educational experience and it seemed like a product that everybody wants, so all the people participating are winning."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.