Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Module 2: HTML Dr. Ibrahim Yucel COM 420 First a look at IT through History What the Video Demonstrates While new technology offers great advantages, It can be very difficult for those who are not familiar with it to adjust. Knowledge that experts take as common sense are lost to a person with no foundation to build on. For this reason we will be covering the very simple basics of HTML before moving on to more complex topics. Practicing HTML I want to note that you can practice your HTML on your computer without uploading it to a web server. HTML can be made with any simple text editor (like notepad for Windows, TextEdit for Mac OS X). Just change the extension of your file from .txt to .htm or .html and a web browser can open it to show you what your html file looks like. IDEs In addition to text editors, web designers like to use IDEs (Integrated Development Environments) to build more complicated websites. IDEs can highlight tags, format whitespace, suggest tags, and completely write code for you. While I do not prohibit the use of IDEs, if you are new to HTML I suggest starting with a Text editor or a simple IDE like Notepad++ until you have an understanding of HTML. For example, a common mistake among first time users of Dreamweaver is to enter html code into the design view. Anything typed in the design view is automatically coded, so your "code" is just text in your HTML document. Summary ● Summarize the basics of HTML for web development ● Describe the how and why of Linking ● Summarize the use of fonts ● Some basic design strategies when writing HTML HTML History ● Markup languages were used to encode formatting of documents for high quality printers. ○ GML (Generalized Markup language) was one early approach by IBM. ○ Script (for IBM Mainframes) ○ Runoff and Scribe (DEC mainframes) ○ nroff and troff (for Unix systems) ● 1986 ○ SGML the predecessor to HTML is finalized by the ISO (International Organization for Standardization - NOT an acronym. ISO is Greek for equal) ● 1989 - HTML is proposed ● 1993 ○ HTML is incorporated into the Mosaic browser Recent HTML History ● 1997 - HTML 4.0 Provisions for Frames, scripts, style sheets and other improvements... ● 2004 - Work starts on HTML 5. 2014 is the release date. ○ HTML5 is ready to be used, although not officially finished ○ HTML5 adds massive support for interaction and graphics. It will be fighting Flash as the dominant multimedia tech on the web http://ishtml5readyyet.com/ HTML5 Videos What is HTML 5 5 Reasons to use HTML5 Suggested Discussion Topics What are the changing trends with how people consume the web? How will these trends influence the choices designers have to make? What are the Pros and Cons of Flash VS. HTML5? What will the future of the web look like? HTML5 ● HTML5 elements must be properly nested ● HTML5 elements must always be closed ● Best practices call for an end tag or the start tag must end with />. ● HTML5 elements must be in lowercase ● HTML5 documents must have one root element HTML Tag Syntax ● How many of you have used the view source command on a website you visited? ● Many pages are now dynamic, and may hide much of their functionality, since HTML has been STRICTLY MARKUP. It will not interact with the user, only setup the page to view. Javascript, php, flash and other technologies are all used to make pages dynamic. CSS also can hide styles used. A result is that much of what you can see in the HTML source may not tell you the whole picture on how a site works. ● Why would you want to hide your websites source code? HTML Tag Syntax HTML tags can either be ● Singular ● Container Singular example Horizontal Rule tag (hr tag) <hr /> (Notice the space between r and /) This will create a horizontal line to appear on the page at the same point in the page text where the tag appears in the source HTML Tag Syntax Container tags come in two parts: 1. The initial part will contain any attributes and arguments. 2. The second part is typically just the tag name, preceded by a slash (/) character. Container tags affect whatever part of the document they contain. Example: The bold tag <b> bold text </b> everything in the container is bold. Attributes This not the greatist code in the world, no, its just attributes... Some tags may have attributes which allow you to set arguments for how you want the text displayed. I.E. the Font tag <font color=red> This is red text </font> Now how would you create bold red text? - by nesting the tags. Best Practice: White space Don't do this Do this <p>Steps to take:</p> <ul><li>step 1<li>step 2<li>step 3</ul> <p>Those are the steps. </p> <p>Steps to take:</p> <ul> <li>step 1</li> <li>step 2</li> <li>step 3</li> </ul> <p>Those are the steps.</p> Future designers of your page will thank you. Structural Tags a HTML Document document is enclosed between HTML tags, which define the version of html being used in the document. Within html tags this we have the head and body tags <html> <head> info about the page here, such as the title tag </head> <body> Text and body here </body> </html> Attributes and Arguments These are added into a tag. EX <body attribute=argument> Attribute/Argument Example BGCOLOR bgcolor=Black Background background="sunylogo.jpg" text text=green link, alink, vlink link=white alink=red vlink=blue Other Useful Structural tags Paragraph tag - <p> This is a paragraph </p> Line break tag - <br /> Comment tag - <!-- I put a comment here. --> Title - <title>My Web Page</title> img - <img src="mypic.gif" width=100 height=100 border=0> Others can be found in the link below http://www.w3schools.com/tags/default.asp - HTML Alphabet What is a Hyperlink? The web is a collection of documents which are connected via hyperlinks Hyperlinks work because of unique address known as uniform resource locators, or URLs A link is a unidirectional pointer from the source document that contains the link to some destination Fun Fact The reason Google algorithm was so innovative is because it understood that links were made by people to point to important information, and does not only rely on keywords. The more links to a page from other high ranked pages meant that a page was a good source of information, and got a high ranking on google. Links are the glue of the Internet! http://infolab.stanford.edu/~backrub/google.html Creating Hyperlinks Example <a href="http://www.sunyit.edu">SUNYIT</a> a - stand for anchor. It begins the attachment to another page href - hypertext reference, this is where the link goes http://www.sunyit.edu - The FULL address of the link Display Characteristics You can change the color of links on a page using link, vlink, and alink. Example: <body link="#008080" vlink=" #FF8000" alink="#8000FF"> These can be overwritten by the browser. Absolute vs. Relative Absolute - is the complete URL, indicates the exact location on the web Example : <a href="http://www.sunyit.edu">SUNYIT</a> a Relative URL gives the location of the object relative to the location of the page the URL is located Example: <a href="about.html">About Me</a> Would link to a new page in the same folder as the current one Web site file structure A website directory is much like that on your personal computer, and URL can use the file structure to organize a web page. This is especially helpful to keep all your images for your site in one folder. <a href="http://www.animals.com/pets/dogs.html"> Relative URL shortcuts If you need to reference a file that is higher up in the file tree than your current location you can use ../ Example: <a href="../beagles/hunting.html> Will go up one level, then down into beagles and get the hunting.html file. Use it more than once to go up multiple levels <a href="../../profile/me.html> Discussion Topic Which Links should you use? That are some issues with Relative and Absolute links? Linking to a Particular Point in a Document Use an Anchor Step 1in document1.html <a href="document2.html#pointA">jump from here</a> Step 2in document2.html <a name="pointA"></a> how would you link to a place in the same document? <a href="#pointA">jump below</a> Using Images in an Anchor Example: <a href="http://www.lycos.com/"> <img src="images/lycoslogo.gif" width=115 height=32 border=0> </a> This makes the image a hyperlink Email Links <a href="mailto:<yourid>@sunyit.edu">E-mail Me</a> Why shouldn't you do this? Spammers can read this email and flood you address with spam. I suggest implying your email address so human intellegence is needed to understand it. I.E. my address is <mylastname>[email protected] Title Attribute - Anchors This attribute allows you to put tooltips as users hover over links. <a href="students/index.htm" title="information">Students</a> Fonts and HTML If you leave the font face alone the browser will choose the default font face, size and color. By doing so you allow the user to control the viewing of the content. However you might want the site to have a specific style. In this case you use the following attributes. Font Size and Style Specify the actual font size <font size="n"> where n is 1 to 7 Specify the relative Font Size <font size="+n"> <font size="-n"> Face is used to control which font you want to use <font face="Verdana"> Other common Font tags ● <b> . . .</b> -- Bolded text. ● <big>. . .</big> -- Increases base font size by 1. ● <i> . . .</i> -- Italicized text. ● <u> . . .</u> -- Underlined text. ● <em>. . .</em> -- Emphasized text; normally italicized text, but may vary with different browsers; for an audio browser it tells the browser to emphasize the text in an audible manner. ● <small>. . .</small> -- Decreases base font size by 1. ● <strong>. . .</strong> -- Normally displayed as bold text, but the voice in an audio browser will be affected by becoming louder, deeper, etc. ● <sub>. . .</sub> -- Subscript ● <super>. . . </super> -- Superscript Headings Headings are used to convey importance (like a title or section) and decrease in importance and size as the heading number increases. <h1> ... </h1> <h2> ... </h2> <h3> ... </h3> <h4> ... </h4> <h5> ... </h5> <h6> ... </h6> Headings Continue You should always use headings to define the text structure of your document. Heading one should be used only once, for the title of the page. Heading 2 should be used to define each main section of the page. Heading 3, 4, and so on should be used for further subdivisions. Don't skip a heading, going from heading 2 directly to heading 4, for example. Font Colors You may change colors in HTML via color name or Hexadecimal code for that color. Colors names accepted include Black, White, PeachPuff, Red, Firebrick, OrangeRed, Blue, MidnightBlue, CornflowerBlue, Cyan, Green, DarkGreen, SpringGreen, Yellow, DarkGoldenrod, Gold, Burlywood, Purple, Orchid, Magenta, BlueViolet Also use the Kuler site to get sets of color themes and the Hexadecimal code http://kuler.adobe.com/ <font color="Colorname">text</font> Background Color - Fonts Remember: A high contrast between the background and foreground is ideal. <!-- red background --> <body bgcolor="#FF0000">Would change the background red. Where can I learn more about HTML? You can google most tags to find definitions on that they do, However If you need more help in learning some basic tags and their use I suggest the lessons here http://www.w3schools.com/html/default.asp For an editor's draft of HTML5 and its changes you can find them here and your textbookhttp://dev.w3.org/html5/markup/