repl.it
@EdgarArcia/

HTML final exam practice :)

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
  <body background="http://mindequalsblown.net/wp-content/uploads/2014/07/CrowntheEmpire.jpg" text="white" link="red" vlink="brown" alink="pink">
    <h1><i><p ALIGN=CENTER>Welcome... to HTML.</p></i></h1>
    <p><b>World Wide Web</b></p><ul><li>Information system that supports HTTP.</ul>
    <p><b>HTTP (Hypertext Transfer Protocol)</b></p><ul><li>Language used by a WWW client to request documents from a WWW server</ul>
    <p><b>HTML (Hypertext Markup Language)</b></p><ul><li>Used to design web pages<li>It's some text with markup tags mixed in<li>Markup = sequence of characters or other symbols inserted at certain places in a text or word processing file to indicate how the file should look when displayed; markup indicators are often called "tags"<li>Markup describes<ul type=circle><li>Appearance<li>Layout<li>Content</ul></ul>
    <br>
    <p><b><a name=CAPAWI>Creating and publishing a webpage involves</a></b></p><ol><li>Creating an HTML document<li>Placing the document in a world-accessible directory on a system running an HTTP server<li>Accessing the web page through http://hostname/~username/filename<li>Validating the document (checking its syntax using a formal HTML validator)</ol>
    <br>
    <p><b>Main HTML elements</b></p><ul><li>DOCTYPE<ul><li>Refers to the rules for the markup language; lets browsers render content correctly</ul><li>HTML<ul><li>Defines the whole HTML document</ul><li>HEAD<ul><li>For it, the element TITLE is required (will be seen in: the browser toolbar; the page title when in favorites; search engine pages)<li>Optional elements<ul><li>BASE -- default address/target for all links on a page<li>META -- defines metadata about an HTML document<li>SCRIPT, NOSCRIPT -- define a client-side script (JavaScript)<li>STYLE -- to define style information for an HTML documents<li>LINK -- defines the relationship between a document and an external resource</ul></ul><li>BODY<ul><li>See the crazy shit I'm doing to my HTML page x'D<ul><li>BACKGROUND<li>BGCOLOR<li>TEXT<li>LINK (set base link color), VLINK (set visited link color), ALINK (set active being clicked link color)<li>OnLoad (a load event occurs when a navigator finishes loading a window or all frames within a &lt;FRAMESET&gt;), OnUnload (an unload event occurs when you exit a document), OnFocus (a focus event occurs when a field receives input focus by tabbing with the keyboard or clicking with the mouse), OnBlur (a blur event occurs when a select, text, or textarea field on a form loses focus) (all this involves JavaScript)</ul></ul><li>The elements inside the BODY element</ul>
    <meta name="author" content="Amira the awesome" />
    <meta name="description" content="This is me practicing with HTML" />
    <meta name="keywords" content="studying, 4.0" />
    <meta http-equiv=“refresh” content="151" /> <!--This refreshes the document every content="n" seconds-->
    <br>
    <p><b>Block-level elements</b></p><!--Block-level vs. inline: block-level elements begin on new lines, but inline elements can start anywhere in a line; etc.-->
    <ul><li>Headings (h1 to h6)<li>ALIGN<li>Basic text sections<ul><li>&lt;p&gt; -- defines paragraphs<li>&lt;align&gt; -- defines alignment<li>&lt;abbr&gt; -- defines abbreviation<li>&lt;dfn&gt; -- defines definition<li>&lt;address&gt; -- defines contact information for the author/owner of a document<li>&lt;blockquote&gt; -- defines long quotation</ul><li>Lists<ul><li>&lt;ol&gt; -- defines ordered list<li>&lt;ul&gt; -- defines unordered list<li>&lt;li&gt; -- defines list item<li>&lt;dl&gt; -- defines a definition<li>&lt;dt&gt; -- defines an item in a definition list<li>&lt;dd&gt; -- defines a description of an item in a definition list</ul><li>Tables and forms</ul>
    <p>Heading and other block-level elements can contain text-level elements, but not vice-versa. <a href="http://www.bu.edu/tech/files/2009/10/goodcode.gif">See here to visualize this concept better.</a></p>
    <br>
    <p><b>The basic paragraph</b></p><ul><li>Use &lt;br&gt; for a line break</ul>
    <p>This paragraph contains &lt;br&gt;.<br>I should really move on to Python or something.<br>So... let's finish this quick.</p>
    <p><b>The preformatted paragraph</b></p><ul><li>Text in a PRE element is displayed in a fixed-width font, and it preserves both spaces and line breaks<li>Attribute: WIDTH<ul><li>Not supported in HTML5; specifies the maximum number of characters per line</ul></ul>
    <br>
    <p><b>Special characters</b></p><ul><li>&amp;lt; for &lt;<li>&amp;gt; for &gt;<li>&amp;amp; for &amp;<li>&amp;quot; for &quot;<li>&amp;nbsp; for a non-breaking space</ul>
    <br>
    <p><b>OLs</b></p><ul><li>Attributes<ul><li>TYPE<ol type="1"><li>See the coding<li>for this list;<li>you also could<li>use a, A, i and I</ol><li>START<ol start="3"><li>See the<li>coding for<li>this list.</ol><li>COMPACT<ul><li>The compact attribute of &lt;ol&gt; is not supported in HTML5; when present, it specifies that the list should be rendered smaller than normal, by reducing the space between lines and the indentation of the list</ul></ul><li>List items<ul><li>Attributes<ul><li>TYPE<ol><li type="a">See the<li type="A">coding<li type="i">for<li type="I">this<li type="1">list</ol><li>VALUE<ol><li value="23">See the<li value="83">coding for<li value="101">this list</ol></ul></ul></ul>
    <p><b>ULs</b></p><ul><li>Attributes<ul><li>TYPE<ul><li type="Disc">Disc<li type="circle">Circle<li type="square">Square</ul><li>COMPACT (as before)</ul><li>List items<ul><li>TYPE (only attribute, variables as before)</ul></ul>
    <br>
    <p><b>Physical character styles</b></p><ul><li><b>bold</b>, <i>italics</i>, <tt>monospace/fixed-width font</tt>, <u>underlined</u>, <sub>subscript</sub>, <sup>superscript</sup>, <small>im cute and smol</small>, <strike>strike (obsolete)</strike>, <s>strike (not obsolete)</s>, <blink>blinking text is frowned upon :'(</blink><li>FONT<ul><li><font size="7">&lt;size&gt;</font>, <font color="pink">&lt;color&gt;</font> and <font face="georgia">&lt;face&gt;</font></ul><li>BASEFONT<ul><li>Specifies a default text-color, font-size or font-family for all the text in a document; not supported in HTML5</ul><li>SIZE</ul>
    <p><b>Logical Character Styles</b></p><ul><li><em>emphasis</em>, <strong>strong</strong>, <code>code</code>, <samp>sample output from a computer program</samp>, <kbd>keyboard</kbd>, <dfn>defintion</dfn>, <var>variable</var>, <cite>cite something</cite><li><a href="http://members.tripod.com/bab_teach/CCSU/HTMLLesson/physicallogical.htm">Brief explanation of the difference between physical and logical and the applications of some of the attributes.</a><li>Hypertext links<ul><li>A<ul><li><a href="https://padlet.com/azni_astro/KOS1110CPP">Link towards Dr. Azni's padlet for our class.</a><li><a href=#CAPAWI>Click here to go to 'Creating and publishing a webpage involves', which I have set as an anchor</a><li>TARGET specifies a window or a frame where the linked document should be loaded.<ul><li>_blank -- load in a new window<li>_self -- load in the same frame as it was clicked<li>_parent -- load in the parent frameset<li>_top -- load in the full body of the window<li>framename -- load in a named frame</ul></ul></ul><li>IMG<ul><li>&lt;src&gt; (required), &lt;alt&gt; (technically required), &lt;align&gt;, &lt;width&gt;, &lt;height&gt;, &lt;hspace&gt;, &lt;vspace&gt;, &lt;border&gt;, &lt;usemap&gt;, &lt;ismap&gt;</ul><li>Miscellaneous text-level elements<ul><li>AREA -- client-side image maps (image with clickable areas)<li>APPLET -- Java</ul></ul>
    <br>
    <p><i>Example from Dr. Linda's slides</i></p><p>My favorite color is <del>blue</del> <ins>red</ins>!</p><p>Notice that browsers will strikethrough deleted text and underline inserted text.</p><p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. / Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p><p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> 
    <br>
    <p><i>Example from Dr. Linda's slides</i></p><p>An image: <img src="https://4.bp.blogspot.com/-ri2bjKMM0kc/VzbppAY-W6I/AAAAAAAASq8/mZFY4WE8Ln0Vmh11DESeO3ppAL_tpSL4ACLcB/s1600/big-grin-rosy-cheeks-emoji.png" alt="Smiley face" width="53" height="53" /></p><p>The syntax of inserting a moving image is no different from the one to insert a non-moving image</p>
    <br>
    <p><b>TABLE attributes <small>(yes indeed my coding and writing after this isn't so careful due to tiredness)</small></b></p><ul><li>ALIGN -- values are LEFT, RIGHT and CENTER<li>BORDER -- specifies the width in pixels of the border around the table; this is in addition to the border around each cell (CELLSPACING)<li>CELLSPACING -- gives the space in pixels between adjacent cells; drawn as a 3D line if BORDER is nonzero, otherwise empty space in the background color used; default is usually about 3<li>CELLPADDING -- determines the empty space in pixels between a cell’s border and its element; the default is usually about 1<li>WIDTH – This specifies the width of the table, either in pixels (&lt;TABLE WIDTH=250&gt;) or as a percentage of the current browser window width (&lt;TABLE WIDTH=“75%”&gt;)<li>BGCOLOR -- to specify the background color of the TABLE<li>BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT -- nonstandard attributes supported by IE to specify the colors to use for the borders<li>BACKGROUND -- nonstandard attribute supported by IE that sets an image file to be tiled as the background of the table<li>RULES -- HTML 4.0 attribute that specifies which inner dividing lines are drawn; legal values are NONE, ROWS, COLS and ALL<li>FRAME -- specifies which outer borders are drawn; legal values are BORDER or BOX (all), VOID (none), ABOVE (top), BELOW (bottom), HSIDES (top and bottom), VSIDES (left and right), LHS (left), and RHS(right)</ul>
    <p><b>TABLE CAPTION</b></p><ul><li>ALIGN attribute has values TOP and BOTTOM</ul>
    <p><b>TR</b></p><ul><li>TR is used to define each row in a table; each row will then contain TH and/or TD entries<ul><li>ALIGN -- (legal values LEFT, RIGHT or CENTER) to set the default horizontal alignment for table cells<li>VALIGN -- (legal values  TOP, MIDDLE or BOTTOM) to set the default vertical alignment for table cells<li>BGCOLOR -- sets the color for the table row, overriding any values set for the table as a whole<li>BORDERCOLOR, BORDERCOLORDARK, BORDERCOLARLIGHT -- supported only by IE, these specify the colors to use for the row borders</ul></ul>
    <p><b>Table cells: TH and TD</b></p><ul><li>COLSPAN -- defines a heading or cell data entry that spans multiple columns<TABLE align=center BORDER=1><TR><TH COLSPAN=2>Col 1&2 heading<TH>Col13 heading<TR><TD>Col1 data<TD>Col2 data<TD>Col3 data</TABLE><li>ROWSPAN -- defines a heading or cell data entry that spans multiple rows; similar to COLSPAN<li>ALIGN -- LEFT, RIGHT, CENTER, JUSTIFY and CHAR<li>VALIGN -- TOP, BOTTOM, MIDDLE<li>WIDTH, HEIGHT -- values in pixels only (no percentage officially allowed)<li>NOWRAP -- use with caution<li>BGCOLOR, BACKGROUND -- same as for TABLE and TR</ul>
    <br>
    <p><i>Example from Dr. Linda's slides</i></p><h4>Without cellpadding:</h4><table border="1"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>With cellpadding:</h4><table border="1" cellpadding="10"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table>
    <br>
    <p><i>My attempt</i></p><table align=center border="1" cellpadding="11"><caption align=bottom><b>Table 1.0</b> Amira's chances</caption><tr><td>Chances of Amira scoring 4.0 for everything</td><td align=center>100%</td></tr><tr><td>Chances of Amira not scoring 4.0 for everything</td><td align=center>0%</td></tr></table>
  </body>
</html>
result
console