Popular in Course
verified elite notetaker
Popular in Department
This 21 page Bundle was uploaded by Eli Fine on Monday August 25, 2014. The Bundle belongs to a course at a university taught by a professor in Fall. Since its upload, it has received 109 views.
Reviews for htmlnotes.pdf
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: 08/25/14
You cannot copy and paste from your notes to notepad Hypertext Markup LanguageHTML HTML is used to describe the content and format of documents There are 2 types of tags 0 1 sided tag are used to insert something Ex jpeghorizontal linelthrgt 0 2 sided tag It will tum something on and turn something off Ex ltigt word ltigt Attributes attributes control the behavior of a tag EX lthl align center gt Anything that you put in your webpage the code goes between the opening and closing ltbodygt tags If you don t do that you get 10 points on your grade for the project Ex Structure lthtmlgt ltheadgt lttitlegtMrDube s Chemistry classeslttitlegt ltheadgt ltbodygt ltbodygt 6 Page content will go between the ltbodygt tags lthtmlgt Ordered Lists ltolgtlt01gt tag createsstarts a list and ends it Bullets are listed as ltligt lsided tag Note by default if no attribute is listed then it will be listed as 123 To set an attribute to the list then lt01 type insert here without parentheses the choices are A a I i Unordered Lists ltulgtltulgt tag createsstarts an unordered list and ends it ltul type insert here without parentheses The choices are circle square etc Can also list things using ltligt Character Tags Physical bold italics underline subscript superscript Logical Inserting a Graphic Images can be displayed in two ways as inline images or as extemal images 0 An inline image displays directly on the WebPage and is displayed when the page is accessed by a user 0 An inline image can be placed on a separate line in your HTML code or it can be placed directly Within a line of text 0 J PEG or GIF files In order to center an image a ltpgtltpgt tag must be used Exltp align center gtltimg src dubejpg gtltpgt Special Characters Occasionally you will want to include entities or special characters in your Web page that do not appear on your keyboard For example 0 Registered trademark symbol 0 Copyright symbol HTML supports the use of character symbols that are identified by a code number or name Inserting Horizontal Lines A line can have a align attribute size attribute Width attribute color attribute and shade lthr align center gt Align specifies to centerleft or right Size specifies to the height of the line by pixels Width indicates the Width of the line in pixels Color indicates color Noshade specifies that the browser displays a solid line Nested List List Within a list Ex ltolgt ltligt lt1igt ltolgt ltligt ltolgt lt1igt ltolgt This creates a list Within a list Backgrounds ltbody background examp1ejpg gt Image will by default be tiled ltbody bgcolor red gt Changes the background color Text Color ltbody text color gt Changes the color of text Misc Code amp16O amp1838 Anchor lta name name gtltagt Exlta name cc gtClassesltagt Anchor is a destination of a link it can be in the same document or in a different document Link name and anchor name have to match case sensitive To reference code if anchor and link are on the same page lta href name gtany nameltagt Exlta href cc gtClassesltagt Linear structure each page is limited to the next and previous pages in an ordered chain of pages Augmented Linear Structure a link in each page that jumps directly to the first page While keeping the links that allow you to move to the next and previous pages Hierarchv Structure pyramid like structure A B B C C C C Combo of Hierarchical Structure a hierarchical structure in which each level of pages are linear Linking to A Doc Ex lta href contacthtm gtContact meltagt If both are in same folder then then this code Works Link to an Anchor Ex lta href homehtminterestsquotgtInsertHelloWorldHereltagt NO SPACES EVAR Absolute paths 0 HTML supports only these 2 paths An absolute pathname provides a precise location for a file Each absolute path begins with a Each folder is separated by a Ex CItutorialO2caseparkshtm Relative path Specifies the location for a file in relation to the folder containing the current Web document Relative path names use two periods Extutorialchemhtm 0 Relative pathnames make your hypertext links portable 0 Unlike absolute path names If you move your files to a different computer or server the hypertext link will stay intact Uniform Resource Locator URL A URL specifies a precise location on the web for a file Ex lta href httpwwwmwueducourseinfohtmlgt Course Informationltagt replaces the current window To force a document to appear in a new window Exlta href url target namequotgtHypertextltagt Linking to a server FTP File Transfer Protocol FTP servers can store files that Internet users can download or transfer to their computers Exlta hrefftp ftpmicrosoftcomgtMicrosoft FTP serverltagt Linking to Email lta hrefmailtodavis mwuedugtdavis mwu edultagt Color Values A Color value is a numerical expressionvalue 0 Any color can be thought of a s a combination of three primary colors red green and blue 0 By varying the intensity of each primary color you can create almost any color and any shade of color 0 This principle allows a computer monitor to comvine pixels of red green and blue to create the array of colors you see on your screen E 0 White has a triplet of 255255255 0 Yellow has the triplet 255255 0 because it is an equal mixture of red and green with no presence of blue Hexadecimal Value 0 Number system based on 16 mathematics rather than 10 o 0l23456789ABCDEF Colors of text and background ltbody bgcolor color text color link color vlink color alink color gt 0 ltalink color gt determines the color of an active hyperlink ltfontgt tag 0 The ltfontgt tag allows you to specify the color the size and the font to be used for text on a Web page 0 The syntax for the ltfontgt tag is o ltfont size size color color face face gt text ltfontgt 93 The default size of text is 3 Changing the Font Face Generic fonts 0 serif 0 sansserif 0 monospace 0 cursive 0 fantasy ltfont face Arial Helvetica sans serif gt Arcadium ltfontgt The Process of Tiling the background imagg Extensions to the ltfontgt and ltbodvgt tags ltfont point size sizetype in a number weight boldnesstype in a number gt E Graphics Interchange Format 0 Noninterlaced graphic starts at the top and moves down 0 Interlaced gifs 0 Transparent GIFs o In place of a transparent background only the image will show 0 Ex C0lorgreen 0 Animated Gifs 0 Several images ashed at you to give you and appearance of movement JPEG Joint Photographic Experts Group J PEG format creates graphics that can use the full 167 million colors J PEG files are most often used for photographs and images that cover a Wide spectrum of color Controlling Image Alignment Exltimg src bucksjpg a1ign 1eft gt To increase the horizontal and Vertical space around an image use the hspace and Vspace attributes The syntax is ltimg src URL Vspace 0 Hspace horizontal space 0 Vspace Vertical space You can also control height and width of the picture measured in pixel or a percentage of pages height and width Va1ue hspace Va1ue gt 0 Hot spots are defined through the use of image maps which list the positions of all hotspots within an image 0 There are two types of image maps serverside image maps and client side image maps 0 A client side image map is inserted in an image map into the HTML File 0 The browser locally processes the Image map 0 Create the ltmapgt tag that defines the different hotspots on the image as follows 0 ltmap name mapname gt o ltarea shape shape cords coordinate href URL target I Three shapes Rectangles circles or polygon 9 window The syntax for a rectangular hotspot is I ltarea shape rect coords x1eft yupper xright y1ower href URL targer window gt I ltimg src image height Va1ue width VALUES MAY BE INSERTED o IEwidth 100 93 Va1ue usemap name gt NOTE Ex1 ltarea shape rect coords 3 84 61 499 271 href waterhtm gt Ex2 ltarea shape circ1e coords 307center x l37center y 66radius Ex3 ltarea shape po1ygon coords l3 60 13 270 370 270 370 225 230 225 230 60 href rideshtm gt THIS GOES IN A COUNTER CLOCKWISE FASHION Specifying the size of an Inline imagg Add this into the ltimggt tag Height Va1ue width Va1ue Definition List ltdlgtdefinition list ltdTgtdefinition termtitleSmoked ltddgtdefinition defined ltd1gt Tables Text Tables 0 Contain only Text evenly spaced in rows and columns 0 Text has to be the same Fixed Width font Graphical Tables 0 Is displayed using graphical elements 0 Can include design elements such as bg colors and colored borders with shading 0 Allows you to control the size of tables cells rows columns and alignment of text FixedWidth Font Use the same amount of space for each character Use a FixedWidth font without it the table will not look lined up Using the ltpregt Tag The ltpregt tag creates preformatted text and retains and spaces or line breaks indicated in the HTML file The ltpregt tag displays text using a fixedwidth font Tells the font to be fixed width Uses both opening and closing tags TABLE TAG UNEEDED De ning a Table structure Specific table structures The number of rows and columns The location of column headings The placement of a table caption Once the table structure is in place you can start entering the data into the table Using the lttablegt lttrgt and lttdgt Tags Graphical Tables are enclosed within a twosided lttablegt tag Each Row of the table is indicated using a two sided lttrgt for table row To display data in a table put in between the two sided lttdgt tag table data The graphical Table Syntax The syntax of a graphical table is lttablegt lttrgt lttdgt First Cell lttdgt lttdgt Second Cell lttdgt lttrgt lttablegt Ex1 lthtmlgt ltheadgtltheadgt ltbodygt lttable borderquot5 quot Widthquot l00quotgt lttrgt lttdgtDustinlttdgt lttdgtLuulttdgt lttrgt lttrgt lttdgtWHSlttdgt lttdgtTGIFlttdgt lttrgt lttablegt ltthgt tags ltthgt tags are used in place of TD tags by default they are bold and centered th table heading TAKES THE PLACE OF THE TD TAG Creating a Table caption A Caption is a title that goes over the top or bottom leftright of a table The syntax for creating a caption is ltcaption alignquotalignment gtcaption textltcaptiongt 0 It is align able 0 Bottom top center leftright Adding Gridlines Borders and Background All of these are attributes to the table tag Tags and attributes are provided to control the placement of the table Adding a Table Border lttable border Value gt Value is the Width of the border in pixels The size attribute is optional if you don t specify a size the browser makes it 1 pixel in size by default lttable size Value gt Cell Spacing lttable border 5 cellspacing O gt The Floating Frame Syntax ltiframe src URL frameborder option gtltiframegt Marginwidth marginheight and name attribute Work align attribute height and Width 93 Cell Padding Cellpadding Value Provides Extra Spacing between characters and lines of cells Default is 1 Tables Frames and Rules The frame is lttable frame type gt frame box by default Rules attribute lets you control how the table gridlines are drawn lttable rules type gt Types all rows cols or none De ning the Table Size The syntax for specifying the table size is lttable width size height size gt Attribute of the entire table To set the Width of an individual cell you can add the Width attribute to either the lttdgt or ltthgt tags ning contents of table Attribute of lttdgt tag EX lttd align right gt lttd Valign top gt Valign is the Vertical alignment Spanning 1 colspan 2rowspan Ex lttrgt lttd colspan 2 gt lttdgt lttrgt EX2 lttrgt lttd rowspan 2 gtlttdgt lttdgtlttdgt lttrgt lttrgt lttdgtlttdgt lttrgt REMEMBER ltthgt TAKES THE PLACE OF A lttdgt Applying Background color lttablegt lttrgt lttdgt ltthgt can have color EX lttable bgcolor color gt lttr bgcolor color gt lttd bgcolor color gt 93 Table Borders The syntax for the bordercolor attribute is lttable bordercolor 93 color gt Bordercolorlight and bordercolordark attributes will give you the 3D border effect EXlttable bordercolorlightquotcolor bordercolordarkquotcolor gt Applying a Table Background Can put into an entire table row or individual cell Uses the Background attribute Ex lttable background parch gt Comments lt Comment LOLOLOLOLOLLOLOLOLOLOLOLgt Columns Up and DoWn roWs Horizontal To Make A Column Group lttablegt ltcol span 5 align center gt lt DO NOT CONFUSE WITH colspan This is to make a column itself spangt lttablegt lttablegt ltcolgroup span 7 width 60 Valign top gt ltcol bgcolor pink gt ltcol span 4 bgcolor white gt ltcol span 2 bgcolor pink gt ltcolgroupgt Frames FRAMES are NOT Webpages They are placeholders for Webpages to be put into A Frame is the section of the browser capable of displaying the contents of an entire Webpage ltframesetgt is used to store the definitions of the Various frames in the file The ltframesetgt code does not include an opening and closing ltbodygttag Frames can be defined only by rowscolumns 0 The Syntax for creating a row or column frame layouti s o ltframeset rows row height 1 row height 2 row height 3 gt Row and columns can be specified in three ways pixels percentage of the total size of the frameset or by an asterisk De ning Rows and Columns Using an Asterisk ltframeset rows 160 gt creates two rows of frames The Asterisk means make the next frame the entire rest of the page that s unclaimed IE 160 rest of page ltframeset rows gt creates three equal rows EX lthtmlgt ltheadgt lttitlegtThe Yale Climbing Schoollttitlegt ltheadgt ltframeset rows 85 gt ltframesetgt lthtmlgt Specifying a Frame Source In between the opening and closing ltframesetgt are going to have the source defined in them ltframe src URL gt EX ltframeset rows 85 gt gives you TWO rows ltframe src logohtm gt ltframeset cols l40 gt nested frameset Gives you TWO columns ltframe src homehtm gt ltframe src linkshtm gt ltframesetgt ltframesetgt Controlling the Appearances of your frames Scroll Bars The size of the margin between the source doc and the frame border Whether or not the user is allowed no change to the size of the frame Controlling the Appearance of Scroll Bars ltframe src URL scrolling scrolling gt scrolls by default Controlling Frame Margins The source doc should be far enough from the Margin so that you can tell that there IS a margin ltframe src URL marginheight Value marginwidt Value gt If only one is specified it will set the other heightwidth that is unspecified to the same Value as the one that IS specified 93 Only controls the space of the document to the edge of display Setting a margin of 0 can get rid of the scrollbar Controlling Frame Resizing ltframe src URL noresizegt Working with Frames and Hypertext Links By default with no attributes if you click on a hyperlink it will open on the frame its on currently You can display hyperlinks in many Ways 0 In a different frame 0 In a new Window 0 In the entire Window 0 Each of the frames must be given a name 0 Simply point the hypertext link to the frame name Assigning a Name to a Frame ltframe src URL name framename gt case sensitive Specifying a Link Target lta href URL target framename gt Using the ltbasegt Tag Use the gtbasegt tag to specify the default target for hyperlinks in a frame layout ltbase target framename gt if not in the head section it WILL not Work Appears in the HEAD section of the HTML file Used to specify the global options for the page Every hypertext link will open in the frame of the base tag The ltbasegt tag is useful when your page contains a lot of hypertext links that point to a target link Working with Frame Borders There are additional attributes you can apply to the ltframegt tag that allow you to change border size and appearance Setting the Border Color To change the color of a frame s border use the bordercolor attribute The attribute can be applied either to an entire set of frames using the ltframesetgt tag or to individual frames using the ltframegttag ltframeset bordercolor color gt ltframe bordercolor color gt Setting the Border Width Can only be used in the ltframesetgt tag 93 ltframeset border va1ue gt The Frameborder attribute Addingframeborder no to a ltframesetgt tag removes the borders from the frames in your page Creating Floating Frames ltiframe srcquotimgOlhtmquot frameborderquotnonequot namequotimagesquot alignquotleftquot widthquot300quot heightquot240quot marginWidthquot0quotgtltiframegt Noresize ltframe src URL noresizegt Working with CGI scripts CGI Common Gateway Interface Receives data from the from and uses the data to perform the task Web page designers may not be able to create or edit CGI files Control elements that are commonly used Text boxes for text and numerical entries Selection lists for long lists of options usually appearing in a dropdown list box Radio buttons also called option buttons to select a single option from a predefined list Check boxes to specify an item as either present or absent Group boxes Text areas Buttons Each control element in which the user can enter info is called a field Info centered into a field is called the field value or simply value The ltformgt tag The ltformgt tag identifies the beginning and end of a form A single page can include several different forms but you cannot nest one form inside another The general syntax of the ltfor1ngt tag is ltfor1n attributesgt Form elements and layout tags ltformgt The ltformgt tag includes the name attribute Inserting FieldsInputs ltinput Type checkbox gt ltinput type text gt ltinput type radio gt ltinput type etcetc gt ltinput type password gt gives you the encrypted aka asterisk type of boxtext Working with Text Boxes ltinput type text name name id id gt Name and id are both the same both are used as attributes that identifies the input field for CGI script To create a textbox ltinput name name value value if you want something to dropdown from the box size value max1ength va1ue gt BY default all text boxes are 20 characters Wide 93 The ltformgt tag also includes a name attribute so that it can be targeted by the cgi code ltlabelgt tags ltlabe1 for id gt1abel textlt1abe1gt EXltlabel forquotfnamequotgtFirst Nameltlabelgt Label is the engraving in the box that disappears once typed into It uses a for attribute to target What box it is in Creating a Selection List To create a section list the syntax is by using an opening ltselectgt tag The ltoptiongt tag is used to specify the individual selection acts like ltligt in a list Multiple seclections can be made by using the option groups Exltoptgroup labe1 Adapters gt 6 here is a heading for the group ltoptiongtFastSWitch100 6 These act like a list ltoptiongtFastSWitch20O ltoptgroupgt Working with Radio Buttons Radio button syntax ltinput type radio name name id id value va1ue gt this is a checkbox type and Whatever value is it goes to the cgi script ALL the radio buttons must be named the same if you Want only radio to button to be filled only 93 93 93 Creating a Group Box A group box labels an entire ltfieldsetgt ltlegend a1ign valuequotgtTextlt1egendgt ltfieldsetgt dustinluu95 gmailcom Group Box Size If you put the group box in a table cell you can adjust it through that tablecell Creating a Text Area To create a larger text area fpr a text box use the tag lttextarea name name id id rows Value cols Value gt default text lttextareagt Creating Form Buttons Run programs submit forms reset the form to its original state Creating Submit and Reset Buttons A submit button is a button that is created to send stuff to the CGI script Creating buttons with the ltbuttongt tag The syntax of the ltbuttongt tag is ltbutton name name Value Value type option gt button text and HTML tags ltbuttongt Name attribute specifies the name of the button Value attribute sends to a CGI script Q15 attribute specifies the button type submit reset or button 93 File buttons are used so that they can be submitted to the CGI script ltinputtype f1le name f1lename gt You can even use an image as a button ltinput type image src url name 9 text Value text gt Adding a Hidden Field ltinput type hidden name email Value adaVislangearnet gt It lists the address of the recipient but it doesn t let the user of the form to be able to see Working with Form Attributes To specify where to send the form data and how to send it add the following attributes to the ltfor1ngt tag ltform action URL method option enctype text gt Using the mailto Action ltform action mailtoe mailaddress method post enctype 93 textplain gt CSS Does not take the place of an HTML tag or other tags It helps format the Webpage in interesting Ways A style defines the appearance of a document element whether its an H1 heading or a list etc etc Style Types Three types Inline styles allows you to change opening and cosng styles Embedded External Using Inline Styles To create an inline style add the style attribute to the HTML tag using the following syntax lttag style style declarations gt Exlthl style color gold font familysans serif gt 93 Creating an Embedded style Requires an opening and closing ltstylegt tag Within the head section of the HTML file Just above the closing head tag ONLY Within this tag enclose the style declaration inside of it Syntax ltstyle type style sheet language gt Style declarations ltstylegt The default is textcss for type 93 Ex lthtmlgt ltheadgt lttitlegtashdsdhashdlttitlegt ltstylegt H1 colorz gold fontfamily sansserif ltstylegt ltheadgt Grouping Selectors You can also target more than one heading tag in a style Ex lthtmlgt ltheadgt lttitlegtashdsdhashdlttitlegt ltstylegt H1 h2 h3 h4 h5 h6 colorz gold fontfamily sansserif ltstylegt ltheadgt Linking to Style SheetsCSS with a ltlinkgt tag ltlink href mwscss re1 sty1esheet type textcss gt Using an External Style Sheet ltlink href mwscss re1 sty1esheet type textcss gt CAN ONLY BE PUT ABOVE STYLE TAGS AND WITHIN HEAD TAGS Resolving Stvle Precedence HIERARCHY lInline first 2Embedded Second 3External Last Parent and Descendant Elements An element that lies within another element is called a descendant pr descendant element An element that contains another element is called parent or parent element Anything done to the parent tag is sent down to its descendantsaka inheritance Using Font Families A speci c font A generic font Managing Font Size ltaddressgt tag can format address info on the page By default text formatted with the tag is displayed normal sized italicized and aligned to the left of the edge of the page Font size can be used in as a unit of length with a keyword description as a percentage of the parent element with a keyword expressing the size relative to the font size of the parent element You can do font size in absolute units standard units aka mm cm in pt pts etc Use a relative unit The Q unit is the width of a M fractional units can be used with EM and unlike absolute units they are scalable Specifying Word Letter and line Spacing Letter spacing size can be Pixel Percentage em unit keyword larger or smaller etc etc This works the same way with wordspacing and line height Line Height To make paragraphs doublespaced use the style de nition p line height 2 Where p stands for paragraph Font Weights 100 is the lightest and 900 is the heaviest Syntax H2 fontWeight 700 Or b fontWeight bolder b is the bold tag Applying the Center TextAlign Stvle BY DEFAULT THE ADDRESS TAG Will be italicized Syntax is textalign 6 left rightcenter etc EACH ADDITION to a tag must be separated with Ex address fontsize 7em fontstylezetc Verical Alignment Syntax is verticalalign middle top bottom etc keyword speci c Indenting Text Syntax textindent indentation value works Special Text Attributed Textdecoration none overline underline linethrough Texttransform uppercase lowercase none capitalize 0 You can capitalize the first letter of each paragraph make em all uppercase etc etc Fontvariation normal smallcaps o This is used to create small caps The color Attribute Body colorz teal Body colorz hexadecimal Body colorz rgb Working with Background color To change the background color of almost any element use the backgroundcolor style Blockguote tags Opening and closing blockquote tag Blockquote backgroundcolor silver used to block off multiple multiple paragraphs or and even other things etc blockquote Working with Background Imag Backgroundimage urlurl ex backgroundimage urlro coptergif ltthis takes the image found from the folder This has 4 attributes The source of the image filehow the image is repeated in the background BackgroundRepeat values Background repeat repeat x repeaty imagerepeat norepeat BackgroundPosition keywords and percentages Background position The Background Attribute Example of a combination Background White urldraftjpg no repeat fixed center center List Styles Attribute of the ltulgt or ltolgt Syntax for general list style is liststyle 0aS The syntax for applying the ordered and unordered lists attribute is liststyleimage urlURL syntax for positions liststyleposition position By using this method bullets can be outside the paragraph or be indented to be the start of a paragraph Default Value is outside Ex ul liststyle circle urlapplejpg outside Formatting Hypertext links azvisited styles for previously visited sites azlink styles for targets that have never been visited azactive styles for links that are currently being clicked azhover CAN ONLY BE STANDALONE styles when the mouse cursor is hovering over the link Ex azhover colorred text transform uppercase Ex specifity can be more extreme ul b colorz rgbl55 0 0 ul b means only things that are underlined bold Containter elements ltspangt tag is used to contain inline elements such as individual letters Words etc ltdiVgt tag is used to group blocks of text such as paragraphs block quotes headings or lists Ex ltdiV class J amiesbox gtlt diVgt T he original class was actually Leftbox The J amiesbox can be referenced using Jamiesbox Ex Jamiesbox color Red Jamiesbox font Weight 20 Jamiesbox makes the code Work sets it in motion Can do the same thing with the ltspangt tags Formatting BlockLevel element boxes lthlgt tags ltogt tags ltblockquotegt and ltaddressgt ltolgt ltd1gt ltulgt Etc There are three elements margin between the box and the parent element border of the box padding which is the space between the box and around There are four attributes that control the margin size Margintop Marginright Marginbottom Marginleft Too do it all together you can type marginz lOl214l6 to do all of the margins altogether Without having to type in margin top etc etc AKA gang up on it You can do that with practically any code There are 3 attributes of border borderWidth border color border style Float attribute The oat attribute works like the a1ign left Or align right attributes used with the ltimggt tags The syntax is Float align right If you don t want the text to oat up to an empty space you need to use the clear attribute Float clear right To reference id s What ever you named the id you add a right before it ex The id name is id id td code Font size and other svntax shit Syntax Fontsize Textalign Lineheight Padding Fontfamily Fontstyle Width Height Clear
Are you sure you want to buy this material for
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'