Csce 102 test 1
comments in css
(/*)
What file extensions can be used to create an HTML document?
.html and css is .css
•What is a hyperlink? •Creating a hyperlink using the anchor element
<a href="googe.com>Visit our HTML tutorial</a>
Code for putting an image on html
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
parent child element
<ul> <li> <ol> <li> </li> <li> </li> </ol> </li> <li> </li> </ul>
Lists:
<ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <dl> Defines a description list in a dl list you go back and for using <dt> and <dd> ex: <dl> <dt> </dt> <dd> </dd> </dl> Nested lists: List can be nested (lists inside lists): Example <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
•Which elements are inline/phrase elements, which are block-level elements; what is the difference?
A block-level element always starts on a new line and takes up the full width available Examples of block-level elements: <div> <h1> - <h6> <p> <form> Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements: <span> <a> <img>
Computer program
A program is any set of instructions that are executed by a machine/computing device.
What is an empty/void element?
A void element is any element that can not, by definition, have any content in between the start and end tags, but the only type of data that void elements are allowed to have are attributes. Some examples of void elements that you are probably already familiar with include the img (image), br (break), hr (horizontal rule), and meta tags.
Assignment Statements
An assignment statement in Java uses the assignment operator (=) to assign the result of an expression to a variable. In its simplest form, you code it like this: += Addition and assignment -= Subtraction and assignment *= Multiplication and assignment /= Division and assignment %= Remainder and assignment
Element vs attribute
An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag. An element's start tag may contain any number of space separated attribute/value pairs. The most popular misuse of the term "tag" is referring to alt attributes as "alt tags". There is no such thing in HTML. Alt is an attribute, not a tag.
Anchor tags
Anchor tags moves us to one spot on the page to another. Have to id the element you want to reference. <nav> <a href="#cheese"> click </a> </nav>
What elements can only go in the body?
Body tags, paragraph tags
Cascading Style Sheets •What are Cascading Style Sheets? •How can we put a comment in CSS? •What are the three types of CSS and how to use them? ( internal/ embedded, external, and local/inline) **know how to link to an external css**
Css is a style sheet. The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to. Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. <style type="text/css"> p { color: #00f; } </style> External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to. <link rel="stylesheet" type="text/css" href="styles.css" /
How is a comment tag different from other tags? What are the two things that they are used for? What does a comment look like? Where can a comment be placed?
Editing the document, Notes to the editor. In what section can comment tag be placed? Anywhere in the document, head and/or body
gif vs jpeg vs png
GIF is best for images that have solid colors, text, and line art. It is good for computer-generated images, such as those produced by a drawing program JPG is best for photographs, and scanned photographs, of natural images. PNG: PNG files are a lossless format, meaning that compression doesn't affect the quality of the image. PNG file will always look at least as sharp as the original image.
Name 3 browsers
Google chrome, Firefox, internet explorer
What kind of language is Hyper text mark-up language and css?
HTML is a language whose purpose is to mark up content. which is a declarative standard for describing document structure and attributes. What is CSS? CSS is a style language (Cascading Style Sheet). CSS' purpose is to style the markup for a web browser. CSS is also declarative in nature.
Element vs tag
HTML tag is just opening or closing entity. For example: <p> and </p> are called HTML tags HTML element encompasses opening tag, closing tag, content (optional for content-less tags) Eg: <p>This is the content</p> : This complete thing is called a HTML element
Nesting elements
If you have a block of text that you want bold, italic and inside a paragraph, you'll have three HTML elements and the text itself. Example: This is a sentence of text. Because you want the whole sentence to be bold, you add opening and closing bold tags before and after the text. <b>This is a sentence of text.</b> Because you want the sentence to be italics too, the opening and closing italics tag is added before and after the entire block of text. <i><b>This is a sentence of text.</b></i> Finally, you add the paragraph tags to complete the nest of tags. <p><i><b>This is a sentence of text.</b></i></p> When you nest tags, you close the tags in the opposite order that you opened them. Reading from left to right, the tags are opened: P, I, B.
Concatenation Java script
In java, string concatenation forms a new string that is the combination of multiple strings. String s="Sachin"+" Tendulkar";
What does the alt attribute do?
It describes the image for the user.
Java Script What type of language is java script?
It is a scripting language used for web development. DOM: document is following object model
•Does an HTML file (filename.html) ever actually contain an image?
No because the html is linked to the image in a folder on the computer
Is html a programming language?
No.
Relative vs absolute hyperlinks
Relative Paths /graphics/image.png absolute paths http://www.mysite.com http://www.mysite.com/graphics/image.png
Java-script comments
Single line comments start with // Multi-line comments start with /* and end with */.
Software definition
Software is a very broad term that is used to identify programs, data, and other related files that are used to accomplish certain tasks in a computing device.
Attributes used in the img element
The <img> tag has two required attributes: src and alt.
What does the title element do?
The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element: defines a title in the browser toolbar.
What elements can only go in the head?
The following elements can go inside the <head> element: <title> (this element is required in an HTML document) <style> <base> <link> <meta> <script> <noscript>
Internal/fragment identifiers
The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document.
Hardware
The physical components a computing device is composed of.
What is the purpose of Html? What verison of html have we learned in class?
The purpose of HTML is to create webpages. We have learned HTML 5
Target attribute
The target attribute specifies where to open the linked document: <a href="http://www.w3schools.com" target="_blank">Visit W3Schools</a>
Css continued ID VS Classes
The type that takes precedence and inherits from and overrides the others is the one that is listed last. So if the style element occurs after the link element the internal overrides the external css Each element can have only one ID Each page can have only one element with that ID You can use the same class on multiple elements. You can use multiple classes on the same element. Div is its own line while ID goes into the tag ex: <p class "intro">
Lists cont
To change the bullet in an ul list in the css you type ul{list-style-type: square or circle or disk or none}
Changing css property with java-script
To change the style of an HTML element, use this syntax: document.getElementById(id).style.property = new style Get the element with the specified ID: document.getElementById("demo"); Set a background color for a document: document.body.style.backgroundColor = "red";
What are 2 different ways to associate javascript into your html document?
Usage of script tags (refer lab 5), usage of inline JavaScript statements (refer event handler notes from class)
Color and hexadecimal value representation
Usually you can do color:blue but hexa is color:#fcc333
When would a local stype be used in css?
You can add as many style selectors as you want, for example: <H1 style="color:red; font-size:12px; margin:5px;" > local style is used for a style for a specific line
Ways to open the html document in a browser
You have to save the document as .html then open the file on your browser choice.
Background images in css •Using Background images for the entire page •Positioning background images •Repeating background images along X-axis and Y-axis
body{ background-color:black; background-image: url("All_Images/cookie2.jpg"); background-position:right; background-repeat:repeat-y}
User defined elements div vs span
div is a block element, span is inline. This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc. <div id="header"> <div id="userbar"> <spanclass="username">Chris Marasti-Georg</span>
Special entity characters
f you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. A character entity looks like this: &entity_name; OR &#entity_number; To display a less than sign (<) we must write: < or <
Css Values to know background-color, color, text-align, font-size, font-style, font-weight, text-decoration, text-transform, text-indent, font-variant, and line-height, border
http://www.dlxs.org/docs/13/class/text/textclasscss.html This link shows all examples
Pseudo-classes and pseudo-elements
input:focus Selects the <input> element that has focus :hover a:hover Selects links on mouse over pseudo-elements ::after p::after Insert content after every <p> element ::before p::before Insert content before every <p> element ::first-letter p::first-letter Selects the first letter of every <p> element ::first-line p::first-line Selects the first line of every <p> element
Types of event handlers
onclick onmouseout onmouseover alert promt
Group selctor in css
p,h1,div{text-decoration:underline}
Is a browser hardware or software?
software
What is a comment tag?
the comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
Two sections of an HTML document
the head and the body
•Name the empty elements that we have discussed. (In which section can each element be placed?)
the img (image), br (break), hr (horizontal rule), and meta tags. and the body section
Is an image an empty element?
yes
Giving values to a property
•JS Example 1: document.body.style.backgroundColor ='red'; •JS Example 2: document.getElementsByTagName("body").style.backgroundColor='blue'; •JS Example 3: document.getElementById('idNameOfAnyHtmlElement').style.color='green'; •JS Example 4: this.style.backgroundImage=url('/pathtofile/filename.fileextension'); •Remember the property names are very similar to the ones used in CSS without the hyphen and also the text is written in camel-case. In CSS the same properties will be background-image, background-color, font-size etc.