BIT 4444 Exam #1
Body elements
- Defines the document body, using <body> and </body> tags - Can use many HTML elements, including text, paragraph, image, hyperlink, table, form, etc. This is seen by the user in their browsers
URI
(Uniform Resource Identifiers) identify resources on the Internet.
POST
- A POST request typically posts (or sends) data to a server. - Common uses of post requests are to send form data or documents to a server. - Send hidden values to the server that the user is not aware of make input type="hidden"
Head elements
- A container of all head elements, defined using the <head> and </head> tags - The title element is required - Optional elements include meta, style, script, etc.
Form (Page Structure Element) - figure and figurecaption
- A figure caption can be associated with a group of figures (img, charts, table) <figure> <img src="IMG_9490.jpg" heigh="250" width="250"> <figcaption>This is a photo of our customers enjoying one of our amazing pizzas!</figcaption> </figure>
Form (Page structure element) - header
- A page can have multiple header elements; creates a header for each sectioning element; usually includes a heading element (h1,h2,etc.)
Form (input type) - checkbox
- Allow user to make multiple selections - All the checkbox inputs needs to have the same name <p> <label>Site <input type="checkbox" name="thingsliked" value="Design" /> </label> </p>
CSS properties: absolute positioning
- Allows absolute positioning which provides greater control over where on a page elements reside - Normally, elements are positioned on the page in the order in where they appear in the HTML5 document - Specifying an element's position as absolute removes it from the normal flow of elements on the page and positions it according to distance from the top, left, right or bottom margin of its parent element
CSS properties: font-style
- Allows you to set text to none (no special font style), italic, or oblique - Most people use italic {font-style: italic;}
Void element
- An element does not have a mark up text, nor does it have the end tag Ex: <meta charset="utf-8"> or <meta charset="utf-8" /> - Only has a starting tag
CSS properties: box model
- Block-level HTML5 elements have a virtual box drawn around them based on the box model - When the browser renders an element using the box model, the content is surrounded by padding, a margin and a border.
Form (input type) - hidden
- Data in hidden input values will be sent to the action URL when the form is posted (submitted) <input type="hidden"/>
box model - margin
- Determines the distance between the element's edge and any outside text - Margins for individual sides of an element can be specified by using margin-top, margin-right, margin-left and margin-bottom {margin: 2;}
Elements - DOCTYPE
- Each html doc must start with this tag <!Doctype html> - This is a void element because it does not have an ending tag - Type html tells the browser this element contains html code - HTML code is case-insensitive
CSS properties: text-indent
- Indents the first line of text in the element by the specified amount {text-indent: 25px;}
W3C
- One of the W3C's primary goals is to make the web universally accessible—regardless of disability, language or culture.
CSS properties: background-position
- Place the image on the pages using the values top, bottom, center, left and right individually or in combination for vertical and horizontal positioning. - - You can also position by using lengths. {background-position: center;}
CSS properties: relative positioning
- Positioning style for this elements relative to the normal location of this element in the web page {position: relative;}
Form (Elements) - datalist
- Provide a list of options that the user can choose from when they enter value in the text input
Form (Page Structure Element) - aside
- Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes. <aside> <h3>Contact Information:</h3> <p>Here you will find all the information to contact us through email, phone number, and social media.</p> <address> Email us at: beenyis#[email protected]<br /> Call us at: 703-356-8742<br/> </address> </aside><br />
CSS properties - font-weight
- Specifies the "boldness" of text. Possible values are: Bold Normal (the default) Bolder (bolder than bold text) Lighter (lighter than normal text) - Boldness also can be specified with multiples of 100, from 100 to 900 (ex: 100, 200, ....900) - Text specified as normal is equivalent to 400, and bold text is equivalent to 700. - 900 = boldest, lightest = 100 {font-weight: bold;}
CSS properties: background-image
- Specifies the URL of the image, in the format url(fileLocation) - fixed - always see the background image even when you scroll .background_image1 { position: relative; left: 0px; top: 0px; z-index: 1;
CSS properties: color
- Specifies the color of text - Can be used in other elements as well - The format of the color value takes a number of different formats Keyword #Hex hex hex - represents the red, gree, and blue components of a color Use three-hex values: "06f" is equal to "0066ff" {background-color: white; color: rgb(184, 5, 194);}
CSS properties: font-size
- Specifies the size used to render the font. - You can specify a point size or a relative value such as xx-small, x-small, small, smaller, medium, large, larger, x-large, and xx-large - Relative font-size values are preferred over points, because an author does not know the specific measurements of each client's display {font-size: medium;}
Form (Page Structure Element) - summary and details
- Summary element displays a right-pointing arrow next to a summary; when the summary is clicked, the arrow points downward and show the details element <details> <summary><strong>Our Managers:</strong></summary> <p>Customer service is our number 1 priority and we only hire the best in the business.</p> </details>
CSS properties: textalign
- Text in an element can be centered using text-align: center; other values for the text-align property are left and right {text-align: center;}
hostname
- The name of the web-server computer on which the resource resides.
box model - padding
- The padding property determines the distance between the content inside and element and the edge of the element - Padding be set for each aside of the box by using padding-top, padding-right, padding-left and padding-bottom {padding: 4;}
host
- This computer is referred to as the host, because it houses and maintains resources.
URL
- URIs that start with http:// are called URLs (Uniform Resource Locators). - A URL contains information that directs a browser to the resource that the user wishes to access.
Form (Attribute) - method
- Use either a post or get method when you create a form - <form method="post">
Form (Page Structure Element) - section
- Used to define a group of related content, use a heading (h1-h6) to define each section <section> <h1>Our History:</h1> <p>We opened in 2011 to bring smiles and happiness to downtown Blacksburg. </p> <h2>Our Motto</h2> <p>We love pizza</p> </section>
Form (Attribute) - placeholder
- Used to display a help message inside an input box - Allows you to place temporary text in a text field
Form (Page Structure element) - nav
- Used to group navigation links <nav><strong>Click on a page to navigate to its content:</strong> <ul> <li><a href="HW1Part1.html">Home Page</a><br /> <li><a href="HW1Part2.html">Menu Page</a><br /> </ul> </nav>
Form (input type) - tel
- Used to let the user enter and edit a telephone number. <label>Phone Number: <input type="tel" placeholder="703-456-7835"/> </label><br /> - br puts a space in between the area
Form (Page Structure Element) - article
- Used to mark a standalone section, ex: news article, story, comment article> <h2>Our Moto:</h2> <p> Our goal is to be the best pizza place in the New River Valley. </p> </article>
Form (Elements) - select
- User can select something from a drop down list -Selected - first option selected by default <p> <label>Rate our site: <select name="rating" <option selected>Amazing</option> </select> </label> </p>
hyperlink
- When clicked, loads a specified web document. - Both images and text may be hyperlinked. - When the user clicks a hyperlink, a web request is sent to a web server, which locates the requested web page and sends it back to the user's web browser.
Form (input type) - radio
- When only one option can be selected - All the radio buttons need to have the same name <p> <label>Food: <input type="radio" name="stuff" value="pizza" checked /> </label> </p> - checked -specify to check the first radio button
Form (input type) - textarea
- allows multiple lines of text entry - <p> <label>Comments: <textarea name="comment" rows="4" cols="36">Enter comments here</textarea> </label> </p>
tag
- an HTML recognized keyword enclosed in angle brackets - Ex: <html>, </html> - No forward slash is starting or opening tag
Form (Attribute) - autofocus
- attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads. - After the form is loaded the input with this attribute will be selected at the start <input type="text" name="username" size="25" required autofocus />
Meta
- charset, keywords, description, author - Invisible to the client but very useful for indexing purposes - When people make a search if there is a match in the meda section that page will be brought up in the search result of google
Form (input type) - range
- defines a control for entering a number whose exact value is not important (like a slider control). <label>Range: <input type="range" min="0" max="40" value="20" /></label>
Form (input type) - email
- has self-validating capability - <p> <label>Email: <input type="email" name="email" placeholder="[email protected]"/> </label> </p>
Element
- in the format of <start tag>mark up text<end tag> - Ex: <title>Example title</title>
Attribute
- in the format of AttributeName="value" - Ex: <meta charset="utf-8"> - Used to provide an attribute name and value pair - Charset is the attribute name, value is utf-8 - By specifying the value we are telling the browser the character encoding is utf-8. Can encode all the possible characters people use - A character can use either 8-bits or more than that to be transmitted
Form (input type) - Text
- label control is bundled with the text box <p> <label>Name: <input name="name" type="text" size="25" /> </label> </p> - type - whenever browser sees this as text a text box will be created - size number of characters user can type
Form (input type) - color
- provide a user interface element that lets a user specify a color <p> <label> <input type="color" /> (Hexadecimal code) </label> </p>
Form (input type) - reset
- reset all the form elements to their default values <input type="reset" name="clear" />
Form (input type) - submit
- sends form data to a URL -URL able to process form data and send back response <input type="submit" name="submit" />
Form (input type) - datetime
- state represents a control for setting the element's value to a string representing a specific global date and time. <input type="datetime"/>
Form (Elements) - input
- used to create interactive controls for web-based forms in order to accept data from the user - <input name="unique name" type="text" />
Form (input type) - password
- when the user types it into the form it will look hidden <p> <label>Email Address: <input type = "password" name="password" size="25" /> </label> </p>
Form (Attribute) - autocomplete
- when you change to on the form will provide an autocomplete function. - The browser will catch the user input, when the user starts typing in the form, the previous input values will be listed (so the user can rely on the browser catch to complete the user input)
Form (Attribute) - action
-Specifies a URL that the form request will be sent to. - URL of the web server that can process the web request <form method="post" action="http://www.deitel.com">
CSS properties: box-shadow
Adds a shadow effect to any block-level element Heading, a div element, paragraph The property has 4 values: horizontal and vertical offsets of the shadow, blur radius, and color Example: H1 {box-shadow: 25 px 25 px 50 px dingrey;}
GET
A GET request typically gets (or retrieves) information from a server, such as an HTML document, an image or search results based on a user-submitted search term.
Internet
A global system of interconnected computer networks, a.k.a., network of networks
CSS properties: text-shadow
Adds a text shadow effect to any text The property has 4 values: horizontal and vertical offsets of the shadow, blur radius, and color Example: H1 {text-shadow: -4px 4px 6px dimgrey:} Blur radius - defines the blur of the brush to create the effect -4 - pixels - shadow displayed left of the text 4 pixels - shadow displayed underneath the text Radius of the blur brush is 6 pixels Color of the shadow is grey
DNS
An Internet Domain Name System (DNS) server maintains a database of hostnames and their corresponding IP addresses and performs the translations automatically.
HTTP
From the client computer, the web browser sends an HTTP request to the server.
web page
Is an HTML (HyperText Markup Language) document (with the extension .html or .htm) that describes to a web browser the document's content and structure.
Web
One of the services communicated via the Internet
Form (Page Structure Element) - mark
Represents a piece of text marked or highlighted to which authors can refer from another context, to analyze or make explanations about it. <mark>always fresh and never dull.</mark>
MIME
The MIME (Multipurpose Internet Mail Extension) standard specifies data formats, which programs can use to interpret data correctly.
box model - border
The border is controlled using the properties: - Border-width May be set to any of the CSS lengths or to the predefined value of thin, medium, or thick - Border-color Sets the color used for the border - Border-style Options are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset {border-width: 3px; border-style: dashed; border-color: rgb(219, 35, 159);}
IP address
The host name: www.deitel.com is translated into an IP (Internet Protocol) address.
World Wide Web
a collection of interlinked multimedia documents that are stored on the Internet and accessed using the HTTP protocol
portable
allows you to design web pages and applications that run across an enormous range of Internet-enabled devices.
CSS properties: text-decoration
applies decorations to text in an element - Underline - Overline - Line-through - Blink (blinking text) {text-decoration: underline;}
web server
locates the requested web page and sends it back to the user's web browser.
Form (Page Structure Element) - wbr
represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location. <wbr> Hello everyone </wbr>
client-side programming
technologies are used to build web pages and applications that are run on the client (i.e., in the browser on the user's device).
server-side programming
the applications that respond to requests from client-side web applications, such as searching the Internet, checking your bank-account balance, ordering a book from Amazon, and ordering concert tickets.