HTML5 - My First Webpage

HTML5 - My First Webpage

• 1.
  My First WebPage Information and Communication Technology - 8
• 2.
  Objectives  Define aPersonal Page  Define Home Page  Apply the different levels of headings  Write web contents in paragraphs and use the line break  Add lists and create simple web page.
• 4.
  What is aPersonal Web Page?  Something that someone creates about themselves or for others.  It can be about you or for somebody else importantly, it should be personal.  A personal webpage should show your thoughts, ideas, interest, hobbies, friends and family that you strongly want to inform others. Examples:  Online Diaries  Family Pets  Self-Written books or poems  Favorite topics; health, politics, music and arts etc.
• 5.
  What is HomePage?  Serves as the entry point in your website.  It is the first page that is displayed on your browser when you type in the website address.  Home page varies depending on the purpose of the website.  Here are few things you may include on your home page:  A welcome message or an introduction  A logo – for the website branding  The site navigation bar – a link to other pages on your website  Latest updates and modification of your site.
• 6.
  Creating your Headings A heading is used to give emphasis to certain topic title.  It will serve as the title for a section of your documents.  Headings are marked by the <h1> tag and closed by the </h1> tag.  This tag has six levels, the lower-numbered headings stand for more important headings with a larger font size, down to less important, with smaller size. The Six Levels of Heading tags: <h1> </h1> - Largest font size <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> - Smallest font size
• 7.
  The hgroup Element The <hgroup> element is one of the new elements defined in HTML5. It is used to group headings with their associated subheadings (h1-h6 tags).
• 8.
  Creating Paragraphs  Writersseparate their thoughts and arguments into sequences of paragraphs. The <p> element is used to mark a block of text into a paragraph. Syntax : <p> contents. . . . . </p> Applying Line Breaks  This tag forces the browser to have a single break. It just like pressing the Enter key to create a blank space or start a new line .  This tag s stand alone tag and doesn’t require a closing tag. Syntax: <br>
• 9.
  Adding List  Alist is a series of names, words, or other items written, printed or imagined one after the other.  You can create several types of list in HTML, including a numbered list, bulleted list and definition list.  The table below shows the different types of list in HTML: Tags Description <ol> Defines an ordered list of items. (This is for a numbered list) <ul> Defines an unordered list of items. (This is bulleted list) <li> It is used for specifying a list item. It can be used on both numbered and bulleted list. <dl> It is used for declaring a definition list.
• 10.
  Sample:
• 11.
  HTML <dl> Tag The <dl> tag defines a description list.  The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd>(describes each term/name).
• 12.
  Note:  The listelement is also used in page navigation to link other contents or pages within the website.  A navigator bar is a list of links. This is why the most semantic way of marking up a list is to use a list element.  It also has a great advantage when it comes to providing structure.
• 13.
  Hands-On Exercises  Usinga Notepad do the Hands-On Exercises in the lesson. From 6.1 to 6.5.  Follow the necessary instructions and use all the tags we have discussed.  Open the html document using any available browser on the computer.
• 14.
  Assignment (Graded) Personal Website Research on the World Wide Web any personal website and try to analyze and evaluate how the over-all appearance of it.  List down 3 good features and 3 features that needs to be improve.  Try to write a minimum of 5 sentences on why Personal Website became necessary on this modern time.  Printed on a short bond paper, Font: Calibri Size: 12 (One Page Only)  Don’t forget to include the link of the website or a screenshot as well.  Submission next meeting.
• 15.
  Category 5 43 2 1 Quality of Information Information clearly relates to the main topic. Three sources were documented Information clearly relates to the main topic. Two sources were documented Information somehow relates to the main topic. One source were documented Information somehow relates to the main topic. No sources were documented Information doesn’t relates to the main topic. No sources were documented Sources and Format All sources (information and graphics) are accurately documented in the desired format. All sources (information and graphics) are accurately documented, but some are in the desired format. All sources (information and graphics) are somehow documented, but few are in the desired format. All sources (information and graphics) are somehow documented, many are not in the desired format. All sources (information and graphics) are not properly documented, many are not in the desired format. Conclusion Reached The conclusion is strong and shows deep understanding on the given topic. Main Idea stands out and is supported by detailed information. The conclusion is strong and shows understanding on the given topic. Main Idea is clear but the supporting information is general. The conclusion shows understanding on the given topic. Main Idea is somewhat clear and needs supporting information. The conclusion shows somewhat understanding on the given topic. Main Idea is confusing and needs supporting information. The conclusion shows somewhat understanding on the given topic. Main Idea is not clear and needs supporting information.