WGU Web Development Fundamentals (YZC1)

Flashcard maker : Livia Baldwin
parent element
An element that encloses (or wraps) another element.
child element
An element that is enclosed (or wrapped) within another element. The child element inherits CSS properties from the parent element.
external style sheet
A separate document that contains CSS styles and is linked to from an HTML file. Correct way to create the link is . This is typically the first set of styles that are applied to a webpage and can be overridden by internal or inline styling.
internal style sheet
This is a way of applying CSS to one specific document by using the tags in the of the HTML document. This is typically the second set of styles that are applied after the external style sheet and can be overridden by inline styling
inline styles
This is a way of applying CSS to one specific HTML tag through the style attribute. This is applied last and always takes precedence over internal and external style sheets. Example:

tag selector
Way to target elements in HTML using CSS. This will select elements based on existing HTML tags and will target all elements within a document. Example: p, h1, nav, footer. P would target all paragraph tags in the entire document.
class selector
Way to target elements in HTML using CSS. This creates a named way to apply styles to multiple times in one document to multiple items. CSS rules are written as .className and applied to HTML using class=”className”. Class names are case sensitive.
ID selector
Way to target elements in HTML using CSS. This creates a named way to apply styles to a unique item in each document. CSS rules are written as #idName and applied to HTML using id=”idName”. ID names are case sensitive.
padding
Adds space inside an element. For example, if you have a

with a blue background and add 10px padding it will add 10px to each side of the box, that will extend the size of the blue background. Padding can be specified in four directions rotating clockwise. Example: margin:10px 5px 10px 5px; (top, right, bottom, left values)
margin
Adds space outside of an element. For example, if you have a

with a blue background and add 10px margin it will add 10px to each side of the box, but will not extend the size of the blue background that is within the box. Margin can be specified in four directions rotating clockwise. Example: margin:10px 5px 10px 5px; (top, right, bottom, left values)
relative positioning
Positions something on the screen in a different place than where it actually belongs in the document flow, but lays out the rest of the document as if that object were right where it belong and hadn’t been positioned.
fixed positioning
Elements will remain in a specific spot no matter how the browser is manipulated and do not appear in the flow of the document.
absolute positioning
Absolute position uses exact values to position elements on the screen. Requires the use of a containing block. Typically this containing block is a

that has relative positioning applied to it. When it is done in this manner the absolute values are in relation to the containing block. For example, if you move the item left:50px; it will move 50px from the left side of the containing block. If you don’t use a containing block it will use the browser window to apply the absolute values to.
z-index
Defines which elements will appear above other elements if they happen to overlap. Higher number z-index appear in front of lower number z-index. Example z-index:100; will appear on top of z-index:50;
float
When added as an attribute to an image it converts the image from an inline element to a block element. Items can be floated left(float:left) or right(float:right). If images are floated left or right the text will wrap around the image.
clear
Stops elements from floating around other elements. You can clear the float for left (clear:left), right (clear:right), or for both (clear:both).
pseudo elements
Applies to a specific state of an element, for example :hover applies only when the mouse is over an element.
a:link
Pseudo element that styles links that have not yet been visited
a:hover
Pseudo element that styles links while the mouse is over the link. This rule must come after a:link and a:visited
a:active
Pseudo element that selects the active link. This rule must come after a:hover
a:visited
Pseudo element that styles links after they have been visited
/* comment */
Correct way to create comments in CSS
camelCase
A type of capitalization where the first letter is lower case and each succeeding word has a capital letter
CSS
Stands for Cascading Style Sheets. Used to add presentation styling to HTML documents.
Block-level HTML element used to apply CSS to a group of elements in a document
Inline HTML element used to apply CSS to a specific section of text in a document
%
A unit of measure used in CSS to define relative percentages
em
A unit of measure used in CSS to define the current font size. If the font size is 12pt, 1em = 12pt.
px
A unit of measure used in CSS to define a pixel value. Is useful for creating dimensions that are more absolute in size.
Declaration
What a CSS attribute and value are called. Formatted with the attribute name followed by a colon, then the value and a semicolon. Example: color:blue;
Descendent selector
Way to target elements in HTML using CSS. This will select elements that are children of a specific parent element. Example: p a{} would target all links that are within a paragraph tag.
CSS Syntax
A CSS rule consists of a selector (tag, ID, class, or descendent) followed by a block of declarations. Example: .className{color:blue; font-weight:bold;}
HEX
Way of identifying colors using a 3 or 6 digit hexadecimal code. The first two digits represent the red values, the second two digits represent the green values, and the last two digits represent the blue values. Example: #0000FF would be blue, #00FF00 would be green, #FF0000 would be red.
pt
A unit of measure used in CSS to define a point value. Default font size on most browsers is 12 pt.
client
computers that can connect to the internet for short periods of times, such as to check email, update Facebook, or shop at Amazon.
server
computers that are always connected to the internet. Servers hold the information seen on webpages and they “serve” up that information through different types of software.
web server
hold the files, videos, etc. that will be seen on the internet. Provide the information to users, while allowing you to have the ultimate control over how your information is presented and used.
shared web host
Server runs your site in the same place as many other sites. Must share resources, processing power, memory, and hard drive space with other users. Economical, but if one site has problems, it can affect others. Less secure, less power, and less customization. Fewer rights to install your own software.
virtual web host
Server runs in a virtual environment. Guaranteed amount of processing power, memory, and hard drive space only to be used for you. Can have root access, but still will be sharing memory, hard drives, and other resources. If one server crashes, does not impact the others. Allows for more custom software than shared.
cloud web host
Server runs solely on a cloud or network of computers. If one fails, another takes over your site so is more efficient than the previous two. Pay for what you use.
dedicated hosting
Your very own server. You share nothing and have root access so you can install anything. Most expensive type of hosting, but most flexible.
domain name
A unique name for a website that must be registered. Example: Microsoft.com
sub domain
The section of a web address that goes before the domain name. Example: Support.Microsoft.com. Used for quicker access to a specific place in a website.
top-level domains
One of the domains at the highest level in the hierarchical Domain Name System of the internet. Examples: .com = company; .edu = educational organizations; .org = an organization, typically non-profit; .net = open to anyone; .gov = governmental; .mil = US Military
FTP
Stands for File Transfer Protocol. Is used to send files to a server.
absolute reference
The location of the item is coded as if we were typing the full address into a browser URL bar. For example, http://www.wgu.edu/online_it_degrees/bachelor_degree_programs. Use this type of reference when linking to a site outside of your site. This will only work when you have an internet connection.
relative reference
Location of the item is coded in relation to the current page. So if there the main webpage is in the root directory and there is a picture in an images folder in that same directory, we could code it to say to use the file at the location “images/filename.jpg”. This type of reference can be cumbersome if you have a lot of folders. Sometimes it may be necessary to write the code to look for a file a level up from the current document, which would look like “../images/filename.jpg”. Use this type of linking if you know the structure of your site will remain constant.
root relative reference
Looks exactly like the absolute reference except it doesn’t include the domain name . Example: /online_it_degrees/bachelor_degree_programs. Note how it starts with a / . Starts in the web root folder for whatever the website is and moves to the designated folders to look for the files from there. This type of reference is good to use when the folder structure on your site is complicated because you don’t need to write the code to look a level up or to worry about many cumbersome folders.
requests
Clients request information from a website and servers receive those requests and issue responses by “serving” up the requested information.
protocols
Handle the communication between the client and the server, such as HTTP, HTTPS, or FTP
MySQL
A database that can be used to run websites with. Usually set up through a control panel tool on the web host and most provide a PHP MySQL application to help you create tables or modify records
Password Protection
Can help you provide specific information to only specific individuals while others cannot access it. Can be used to set a basic security level for any folder on your website.
FTP Client
An application, such as FileZillia, used to transfer files from a local computer to the web server.
HTML
Hypertext Markup Language
SGML
Standard Generalized Markup Language. This is the original language that HTML is based upon.
The declaration that tells the browser what version of HTML to use. This needs to be the first thing in the document.
Creates a comment in HTML
Tags that indicate the document will contain HTML content.
This contains information that applies to the entire document. Other tags within may include , , and
Container for the main content of the page. Displays all of the visible content on the webpage.
HTML Tags
The basic elements of HTML. Opening tags contain . Closing tags contain .
Standalone Tags
HTML elements that do not contain content. Are writing with a closing /, ex.
attributes
Information added to HTML tags to provide important information the tag needs to help it work correctly.
Whitespace
Characters that you do not see on a page such as spaces, tabs, and new lines. Sequential whitespace is condensed into one space.
metadata
Data about data. This information is included in the section and does not display on the webpage. would define the character set used by the page. Other ways to use metadata include setting a description and keywords for a search engine.
Defines the title for a webpage. Required in HTML even if it is empty.
Tag used to create a line break
 
Entity used to create an extra inline space
Inline tag that gives the marked section of content emphasis. Can visually be controlled with CSS.
Inline tag that sets text in italics.
Inline tag that gives the marked section of content strong value. Can visually be controlled with CSS.
Inline tag that sets text in bold.
Inline tag that sets text in subscript.
Inline tag that sets text in superscript.
Generic block level element used to group items for purposes of styling with CSS.
Generic inline level element used to apply styling with CSS.
One of 6 block level headings. H1 is the largest by default and H6 is the smallest, but they can all be styled differently using CSS. Heading levels help your page get properly indexed.
Block level tag for identifying paragraphs of text. By default paragraphs have space before and after them.
    Block level container for an unordered list
      Block level container for ordered list. TYPE=”” attribute applies the style of ordered list. a – lowercase letters, A = uppercase letters, 1 = numerals, i = lowercase roman numerals, I = uppercase roman numerals. START=”” attribute determines on what number the ordered list begins.
      Block level container for a definition list
    1. Inline level container for list items. Can be used in both the ordered and unordered lists.
      Inline element used to add images to a webpage. SRC=”” attribute defines where the image is located. ALT=”” attribute defines alternative text for when the image cannot be displayed visually. TITLE=”” attribute defines text that is displayed in a tooltip when you hover over the image.
      float
      When added as an attribute to an image it converts the image from an inline element to a block element. Items can be floated left(float:left), right(float:right), or center(float:center). If images are floated left or right the text will wrap around the image.
      clear
      Stops elements from floating around other elements. You can clear the float for left (clear:left), right (clear:right), or for both (clear:both).
      image map
      Image mapping defines regions of a single image to link to different URLs. Image map areas can be rectangle, circles, or polygon and require the coordinates be defined for the area.
      scheme
      Portion of the URL that indicates the protocol in use (HTTP or HTTPS)
      host
      Portion of the URL that indicates the host name or IP address (www.google.com)
      path
      Portion of the URL that indicates where the specific object is located. This typically shows after the host.
      relative link
      Specifies a link’s location in relation to the current document. ../ will bring you up a level from the current directory.
      absolute link
      Specifies a link’s absolute position. Example: http://www.google.com
      fragment links
      Linking to a specific place within the current document. Uses ID attribute defined in elements to create a place to link to. Example:
      semantic elements
      Block level elements designed to create structure that makes it clear what parts of the page serve what purpose. Example:

      Semantic element that contains links to other pages or resources
      Semantic element that contains introductory or navigational aids
      Semantic element that contains a self-contained composition, like a blog posting or newspaper article
      Semantic element that contains a generic sectioning of content
      Semantic element that contains content tangentially related to the content around it
      Defines table headers within a

      element
      Defines table data cells within a

      element
      Container for all of the table information
      Collapsed borders
      Border value that can be assigned through the CSS border-collapse attribute. Allows adjoining cells to share a border.
      Separate Borders
      Default value for table borders that gives each cell its own border.
      Form element that creates a group of buttons and allows the user to choose only one of the items in the group. To group radio buttons together they must all have the same name attribute. Example:
      Form element that contains tags. By default this displays as a drop-down list of options and allows one to be selected. The size attribute determines how many options are shown at once and the multiple attribute allows more than one option to be selected.
      The tag is used to create an HTML form for user input
      Default type of an input, allows for text to be entered in a single line
      Form element that obscures what you type into it
      Form button that will submit the form data when clicked
      Form button that will reset all of the form fields when clicked
      Form element that produces a box that can be checked on or off.
      Form element that produces a multi-line text box
      action=””
      Specifies where to send the form-data when a form is submitted.
      method=””
      Form attribute that defines how the data is submitted. Method=”post” submits variables to the server, but they are not visible on the front end. Method=”get” submits variables in the URL where they are visible. This method allows user to bookmark position/result for a form.
      Block level way to quote a passage of text.
      Definition term used in definition list.
      Definition used in definition list.
      value=””
      Form input attribute that specifies a default value that is entered in the field
      title=””
      Form input attribute that provides a tooltip to the user
      multiple
      Form attribute that allows multiple values to be entered in a single text field, or multiple options to be selected in a field
      checked
      Form attribute that defaults a form field to a checked value
      Defines an area of the page into which another webpage can be loaded
      Includes a separate document within another document. This method is preferred to the depreciated method of using the tag. The src attribute defines the location of the external document that is loaded into the
      Used to group related options in a field. If you have a long list of options, groups of related options are easier to handle for a user.
      Which of the following attributes would configure an ordered list to display uppercase letters?
      type=”A”
      Choose the preferred tag pair to use when emphasizing text.
      Choose the tag pair that is use to link web page documents to each other.
      tag
      The tag is coded in the ________ section of a web page document.
      header
      Which tag is used to force the browser to display the next text or element on a new line?
      Choose the tag pair configures text to be indented from both the left and right margins.

      ..

      The content that displays in the browser is contained in the body section. True or False
      TRUE
      What tag pair contains the items in an ordered or unordered list?
    2. Choose the special character that is used to indicate a blank space.

      Choose the special character that is used to indicate a blank space.

       
      What tag pair is used to create the largest heading?
      what is function of an email link?
      launch the default e-mail application for the visitor’s browser with your e-mail address as the recipient
      Choose the preferred tag pair to use when displaying important text in bold font.
      What tag pair is used to create a new paragraph?
      When do you need to use a fully qualified URL in a hyperlink?
      when linking to a page on an external web site
      True or False? Web pages have two sections: a head and a body.
      TRUE
      Which of the following tags does not require a closing tag?
      The title element configures large, bold text at the beginning of the web page document. TRUE OR FALSE?
      FALSE
      is this correct? Important News
      YES
      What type of HTML list will automatically place a number in front of the items?
      ordered list
      What type of HTML list will automatically place a bullet point indicator in front of each item?
      unordered list
      To associate an external style sheet with a web page, code:
      a link element in the head section of the web page
      Which CSS property configures the font typeface?
      font-family
      Which CSS property configures the color of text?
      color
      An External Style Sheet uses the ________ file extension.
      css
      Select the items below that can be used as a CSS Selector.
      A. an HTML element
      B. a class name
      C. an id name
      ALL
      CSS was first proposed as a standard by the W3C in ________.
      1996
      To apply a style to a certain group of elements on a web page, configure a CSS ________.
      class
      Select the code below that uses CSS to configure a class called “offer” with blue text that uses the Arial or sans-serif font typeface.
      .offer { color:blue; font-family:Arial,sans-serif;}
      Use the ________ tag to associate a web page with an External Style Sheet.
      Which CSS property configures the size of text?
      font-size
      Cascading Style Sheet rules are comprised of:
      Selectors and Declarations
      Which CSS property can be used to configure italic text?
      font-style
      Use the ________ tag to configure a generic area on a web page that is embedded within a paragraph or other block display element.
      Use the ________ tag to code embedded styles on a web page.
      ..
      When CSS is coded in the body of the web page as an attribute of an HTML tag it is called ________.
      Inline
      Use the ________ property to configure bold text using CSS.
      font-weight
      Use the ________ tag to configure a section of a web page that is physically separated from others.
      The declaration property used to set the text color on a web page is:
      color
      Select the code below that uses CSS to configure a id named “footer” that configures small, italic text.
      footer { font-size: small; font-style: italic;}
      Select the code below that uses CSS to configure a background color of #eaeaea for a web page.
      body {background-color:#eaeaea; }
      how did internet start
      for the military
      Berners-Lee created the…..
      world wide web (hyperlinks)
      WWW world wide web
      the graphical user interface to information
      stored on computers running web servers connected to the Internet—
      Entranet
      private network that is contained within an organization or business. Its
      purpose is to share organizational information and resources among coworkers. When
      an intranet connects to the outside Internet, usually a gateway or firewall protects the
      intranet from unauthorized access.
      extranet
      PRIVATE network!
      Web Accesability Initiative
      people need to access internet group created
      accessible
      website provides accommodations that help
      individuals overcome these barriers.
      people must be able to access internet with disabilites
      Section 5 08 of the Federal Rehabilitation Act
      requires people to have to accomodate pages with people with disabilities
      World Intellectual Property Organization
      helps protect property rights on the web
      DTD
      identifies the version of HTML that you’re using (top of web page document)
      Head Section
      contains information that describes the web page document
      Body Section
      (what is actually displayed) contains the actual tags, text, images, and other objects that
      are displayed by the browser as a web page.
      Meta Tags
      describe the document a stand a lone tag doesnt need
      Head Element
      conatins head section
      Title Element
      what will appear in title of bar of web browser
      Headings..
      h1 BIGGEST FONT h6 smallest font
      paragraph tag

      (where paragraphs go)
      Blockquote Element
      is used to display a block of quoted text
      in a special way—indented from both the left and right margins (lets it indent) like..
      asdksdfklfgkh

      kjlkjlkjlkjkg

      Phrase Elements
      sometimes referred to as logical style elements , indicate the context and meaning of the text between the container tags. It is up to each browser to interpret
      that style.
      means
      makes text stand out in BOLD
      means
      usually makes text italized
      means
      makes text in italics
      Unordered Lists
      bulleted format list begins with

      • kljlkjlkjljkj
    3. Ordered List
      numbered lists

      1. kljlkjsdf
    4. to make a copyright symboly you do
      ©
      code for empty speak
       
      what does the element div do?
      configures a structural block area, or “division,” on a web page, with empty space above and below.
      href
      connects these anchor links
      absolute link
      indicates the absolute location of a resource on the Web.
      ex.
      Web Development & Design
      Foundations
      email link
      will automat-
      ically launch the default mail program configured for the browser

      ex. of email
      [email protected] net

      CSS
      flexible, cross-platform, standards-based language developed by
      the W3C. (styles)
      biggest disadvantage is all browsers don’t support it
      The Selector
      can be an HTML element name, a class
      name, or an id name.
      background-color property
      configures background color for an element.
      ex. body { background-color: yellow }
      color-property
      changes color of the TEXT
      ex. body { color: blue }
      font-family
      name of a font, Any valid font or a font family such as serif, sans-serif, fantasy, monospace, or cursive
      font-size
      size of font normal italic oblique
      font-style
      style of font, roman italic oblique
      font-weight
      boldness
      Inline CSS tag for Style

      This is displayed as a red heading

      text color is grey, background is yellow
      embedded styles
      apply to an entire webpage! inline to a specific part
      ex. tag in the HEAD section named “text/css”
      body { background-color: #e6e6fa; color: #191970; }
      h1 { background-color: #19197 0; color: #e6e6fa; }
      h2 { background-color: #aeaed4; color: #191970; }
      styling different parts of the page on CSS page
      example of complete selector
      h2 { background-color: #AEAED4;
      color: #19197 0;
      font-family: Georgia, ” Times New Roman” , serif;
      text-align: center; }
      class selector
      when you want to change a specific word or part of a paragraph or point ,
      begins with a DOT or PERIOD
      ex. . feature { color: #FF0000; }
      when applying your class selector to normal page..
      you put it right before the words you want to do for example.

    5. Usability Studies
    6. id selector
      another way to apply styles to certain parts in your webpage you place this in your style page
      #footer { color: #333333;
      font-size: . 7 5em;
      font-style: italic; }
      then in your regular page put id=”footer” wherever you want the change to happen

      the Span Element
      span element defines a section on a web page that is
      not physically separated from other areas;
      Use the tag if you need to format an area that is contained within another,
      such as within a

      ,

      ,

    7. , or
      tag
    8. example of Span
      on style page you have . companyname { font-weight: bold;
      font-family: Georgia, ” Times New Roman” , serif;
      font-size: 1. 25em; }
      then inside the

      tags you use the span to make the changes
      ex.

      Trillium Media Design will bring

      external style sheet
      is a text file with a .css file extension that contains CSS style rules. links by using Link tag
      link element
      associates an external style sheet with a web page
      link=connects
      rel- “stylesheet”
      href- name of style sheet file (ex. fishcreek)
      A horizontal rule element

      visually separates areas of a page and configures a horizontal line across a web page.
      ex. lkjslkjdslkjdlfkjd
      ________________________________ (horizontal rule)
      lijsdfkjsdlfkjsdflkjsdlfkjslkdfj

      border-property
      the border can change color border-color; border-style (dotted, dashed, solid)
      background repeat
      image to repeat in page
      repeat-y , (vertical repeat),
      repeat-x (horizontal repeat), and no-repeat (no repeat).
      padding
      Shorthand notation to configure the
      amount of padding— the blank
      space between the element and its
      border ( the space between border and text)
      internal
      .thbord{border: 5px solid black}
      h2,h3{color: red}
      color to heading 2 and 3
      p.normal{color:red}
      just that paragraph
      id tag
      #section14{color:red}
      contextual selector
      only kinds of images you can add
      .jpg .gif
      h2, h3{font-family : Arial, ‘Times New Roman’,Garamond}
      in quotations becuase you cannot have spaces between the Times New Roman
      GIF images
      are best used for line drawings containing mostly solid tones and simple images such as clip art. images are transparent
      JPEG images
      are best used for photographs. CANNOT be made transparent saved at 80% has good quality, regular pic
      Image Element
      show graphics on a page
      ex.  My Company Name
      SRC
      file name of the image
      to add figure caption
      #figure
      opacity property
      transparency 0 complete transparent 1 opacity no transparent
      hierarchical organization .
      organizing like tables format different sites connected
      linear design
      in a line ———- info is set up
      POUR
      P erceivable, O perable, U nderstandable, and R obust,
      web page development process IADIM
      are systems investigation, systems analysis, systems design, systems implementation, and maintenance.
      The Website Development Cycle,
      shown in Figure 10.2 , usually consists of the following steps: Conceptualization, Analysis, Design, Production, Testing, Launch, Maintenance,
      and Evaluation.
      domain names
      for your company choose wisley be short not fancy
      A web hosting provider
      offers storage for you web provider
      selectors are periods and IDs are #
      hyper link example
      Web Development ; Design
      Foundations
      selector vs. declaration
      The selector is the body tag, and the declaration sets the color property to the value of blue.

      Get instant access to
      all materials

      Become a Member