Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html class-01


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Html class-01

  1. 1. Md. Ali Hosssain. Web Designer. Jr. Instructor, Graphic Arts Innstitute. Phone:01731402303 02/08/14
  2. 2. The World Wide Web (abbreviated as WWW or W3,[3] commonly known as the web), is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks. •Born in London in 1955 •The web was developed between March 1989 and December 1990. • Mr. Tim Berners-Lee • Published language HyperText Markup Language (HTML); • The Hypertext Transfer Protocol(HTTP) 02/08/14
  3. 3. Basic Website Requirements 1. Domain Name The domain name is the address name you will have on the Internet such as or 2. Website Hosting Hosting is the electronic "space" you rent so that your website and email are accessible over the Internet. 3.Website Development A website developer is the person that builds your website property at your hosting provider. software developer who is specifically engaged in the development of World Wide Web applications, that are run over the Internet from a web server to a client, a web browser. 4. Webmaster In terms of a completed small business site, the webmaster is the technical person responsible for administration and maintenance of the website. 02/08/14
  4. 4. Web Application Static Static websites can only really be updated by someone with a knowledge of website development. Advantages of Static websites • Quick to develop • Cheap to develop • Cheap to host Dynamic Dynamic applications on websites offer interactivity for you and your customers. Some example are content management system, e-commerce system, bulletin / discussion boards, intranet or extranet facilities, ability for clients or users to upload documents, ability for administrators or users to create content or add information to a site. Advantages of dynamic websites •Much more functional website •Much easier to update •New content brings people back to the site and helps in the search engines 02/08/14
  5. 5. Defining A Web Site The very first step in designing a Web site is to define it. And to properly define a site there are three questions that must be answered. What is the purpose of the site? Who will be visiting the site? How will the site serve the client? The answers to these questions will guide you as you construct the site Identify the Purpose of the Site A Web site may have several purposes. In that case it is necessary to determine which is the primary purpose, which is secondary, and so on. A site that is intended to be strictly informative, such as a news site, is likely to look much different that a site that is designed to sell a product. On the other hand, a site for a college may have some subtle similarities to a site that sells books. The college site probably will be intended to present the school is a very positive and manner so that students will want to enroll. The retail book site will want to convince visitors that it is the best place to purchase reading material. 02/08/14
  6. 6. Identify Who Will Visit the Site Determining who the visitors are likely to be is crucial in deciding not only the general appearance of the site, but also the technology that might be used to build the site. If the project is likely to have visitors who log in from home, it is necessary to design the pages with the understanding that some users may still have slow modem connections. Even with so-called "high speed access," Internet connect speeds vary wildly. Users with DSL will almost certainly notice slower page loading compared to those users who have cable or fiber optic access. While quick download times are preferred, some types of Web sites require technology that is not conducive to fast page loads. Such a site may be for a rock band or a high-tech company. Both of which might use Flash! or similar techniques. Serving the Needs of the Client The term "client" in this instance refers to anybody for whom a site is built, not just a paying customer. In the case of a Web site built for a family reunion, the client is the family. Will the site properly serve the need of the family by providing clear directions to the location of the reunion? Can the family photos be properly displayed? A client could be a history professor. In such an instance the message of the professor must be clearly understood. Will he or she want to post assignments and readings? Does the site involve explaining research projects? And who will update the site later? 02/08/14
  7. 7. Technologies include..... Platform • • • • • • • HTML CSS JavaScript PHP ASP C Sharp MySql • • • • • • • Software Knowledge: Dreamweaver Flash PhotoShop Illustrator FireWorks Contribute Acrobat • • • • • • CMS Joomla WoardPress Durpal Majento Cushy CMS Radiant CMS 02/08/14
  8. 8. 12 Benefits Of Having A Website Some of the goals that can be achieved by launching a website include the following: 1. Far Cheaper and Much More Flexible Than Print Advertising 2. Market Expansion 7. Standardize Sales Performance 8. Improve credibility 3. Diversify Revenue Streams 9. Promote your Brick n Mortar Presence 4. 24 7 365 10. Growth Opportunity 5. Offer Convenience 11. Two-Way Communicative Marketing 6. Add Value and Satisfaction 12. Cheap Market Research 02/08/14
  9. 9. Web Browser 02/08/14
  10. 10. What is HTML? HTML is the "mother tongue" of web browser. • • • • • • • HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages 02/08/14
  11. 11. HTML Version /Elements and Tag Year Version HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 Elements and tags? HTML markup tags are usually called HTML tags "HTML tags" and "HTML elements" are often used to describe the same thing. 2013 • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags <tagname>content</tagname> 02/08/14
  12. 12. The <!DOCTYPE> Declaration: The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used. Common Declarations HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> HTML5: <!DOCTYPE html> 02/08/14
  13. 13. 02/08/14
  14. 14. Create your first website <HTML> <HEAD> <TITLE> My Web Site </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <p>Hurrah! This is my website. My name is kamrul Hasan </p> </BODY> </HTML> Save Your HTML: Select Save as.. in Notepad's file menu. You save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you. 02/08/14
  15. 15. BODY Element <BODY attributename="attributevalue"> Deprecated attributes (but still used) BACKGROUND=“Sunset.jpg” (can be tiled) BGCOLOR=color TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected) 02/08/14
  16. 16. Headings <H1 ...> text </H1> -- largest of the six <H2 ...> text </H2> <H3 ...> text </H3> <H4 ...> text </H4> <H5 ...> text </H5> <H6 ...> text </H6> -- smallest of the six ALIGN="position" --left (default), center or right 02/08/14
  17. 17. Headings <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1>Level-1 (H1)</H1> <H2 ALIGN="center">Level-2 (H2)</H2> <H3><U>Level-3 (H3)</U></H3> <H4 ALIGN="right">Level-4 (H4)</H4> <H5>Level-5 (H5)</H5> <H6>Level-6 (H6)</H6> </BODY> </HTML> 02/08/14
  18. 18. <P> Paragraph <P> defines a paragraph Add ALIGN="position" (left, center, right) Multiple <P>'s do not create blank lines Use <BR> for blank line Fully-specified text uses <P> and </P> But </P> is optional 02/08/14
  19. 19. 02/08/14