Lesson 1- Review in HTML.pptx.pdf

Lesson 1: REVIEW IN Introduction Living in the digital world, a website is crucial for any business. If you have a business and don’t have a website, you are probably losing out on opportunities for your business. A website can be used to accomplish many different marketing strategies to h...

Lesson 1: REVIEW IN Introduction Living in the digital world, a website is crucial for any business. If you have a business and don’t have a website, you are probably losing out on opportunities for your business. A website can be used to accomplish many different marketing strategies to help your business grow. The web has a far more extensive reach than any other form of advertising. Your website will be the center of your company’s online presence. You can advertise your business around the web on social networking sites, forums and through pay-per-click advertising programs. Importance of HTML HTML or most known as Hypertext Markup Language is considered as the leading markup language. It is considered as the standard markup language for websites. HTML, as the name itself implies, is written using markups or tags which represent various elements Structure of HTML 1. Elements 2. Tags 3. Attributes Elements Elements are components of an HTML file, including anchors, paragraphs, tables, forms, lists, images, and the like. Tags Tags, or markups, represent the element in an HTML file. These are what we also include in our HTML file. The tag has two kinds, the paired tag, and the empty tag. What is the difference between the two? 1. Paired Tags Paired tag consists of a start tag (also called an opening tag) and an end tag (also called a closing tag). Most HTML tags are paired tags. The start tag marks the beginning of a section that is formed using a left-angle bracket, the tag name, and a right-angle bracket 1. Empty Tags Empty tags are tags that do not have an end or closing tag. Empty tags are formed using a left-angle bracket, the tag name, a slash, and a right-angle bracket. Attributes Attributes in HTML are additional information or characteristic given to HTML tags. It is used to enhance or modify a tag and is always placed within the start tag after the tag name separated with space. Attribute values may be enclosed using a single or a double quote. Several values can be assigned to an attribute, separating them with a comma. Here is what an attribute with a value looks like:  HTML TAGS In HTML, we have the core HTML tags that define mostly of the document structure. Those tags are the , , and tags. 1. The tag The tag is a paired tag which indicates that the document is an HTML file. With its start and an end tag, it indicates the beginning and the end of an HTML file. 2. The tag The tag holds information about the document and is generally not displayed. Some elements can be placed within the head tag such as , ,, ,, and which specify the document’s metadata. 3. The tag The tag contains all other tags and delimits the body section of the web pages. This section is the visible section when web pages are executed in a browser. Lesson 2: Formatting Text and Images Text Appearance Tags Adding Titles and Subtitles These tags are used to create headings, either as a title or subtitle, in an HTML document. The tag defines the most crucial heading in a document. The tag defines the least important heading in a document. REMEMBER: to tags are also known as the Heading Tags. Normally, heading tags, when displayed in a browser, are bold and with margins. Creating Paragraphs The tag creates a paragraph to be displayed in a browser. The browser removes extra white spaces added inside the contents of the tag, and paragraphs always start a new line. Using Preformatted Texts The tag displays preformatted contents on a web page. It also preserves white spaces from new lines and spaces. The font style displayed on the browser will also be dependent on the text editor or Integrated Development Environment (IDE) used. The font style used by a text editor or IDE will be the font style displayed by the browser when using tag. Breaking the Space The tag is an empty tag that displays a breaking space (or a line break) to separate contents on a web page. Use this tag if you want to have a new line without creating a new paragraph. Formatting Tags HTML provides different ways to display a text through formatting tags. The basic formatting tags are bold, italic, and underline. Images, Links, and Other Pretty Things Linking Web Pages The tagor the anchor element creates a hyperlink that could navigate to another web page or an iframe. It is necessary to add the href attribute to an tag to determine which uniform resource locator (URL) it shall navigate to. Example: Google Adding Images The tag describes an image in an HTML document. The most common accepted file types are apng, jpeg, png, svg, ico, and gif. Some attributes used in tag is the following: 1. src – the path or location of the image to be displayed 2. alt – an alternative text to be displayed if the image failed its loading 3. title – a text appears when the mouse pointer hovers in the image 4. width & height– dimensions or size of the image Example: Using Entities Character entities, or just entities, are used to display characters in an HTML document. Character entities are mostly used on reserved characters like < and >. All character entities start with an ampersand ( & ) and end with a semi-colon ( ; ). If the entity has a name, it can be used to call out the character. If none, the equivalent entity number may be used, preceded by a number sign ( # ). Here are some of the commonly used character entities: Introducing Emojis Emojis are image-like texts representing a feeling, an emotion, an action, a place, and many more. Emojis are used by people when messaging to express to add feelings and reactions. In HTML, emojis have an equivalent entity to be used in an HTML document. Here are some samples of standard emojis that we may use in an HTML document: Lesson 3:Tables and Listings TABLE Table tags allow us to create tables, composed of rows and columns, with headers and a caption. The tags used in creating tables are: And Creating a Table It's as easy as pie! Though creating a table in HTML uses at least three elements, creating a table in HTML is simple. Starting with its general container, the tag shall contain all the table elements inside to be part of a single table. A tag structure must be like this: Adding a Row Use the tag to add a table row. A tag must be inside the tag and it shall look like this: Adding multiple rows in a table is possible. Make sure that each table row is properly closed before starting a new table row element. It may look like this: Adding a Column Columns in HTML table are stored in a table data or a cell. The tag is used to add columns in a table. Make sure that the tag is inside a tag. Adding multiple tag is possible but make sure that the first one is closed before opening another. It should look like this: Adding Header Adding a header in a table is optional, yet it allows a title to be displayed per column to guide the readers what the column is about. Use a tag to add table headers. Make sure that the table header is inside a tag. Adding multiple headers is possible making sure that the first one is closed before opening another. It should look like this: Listing Tags In HTML, lists are used to group related items be it ordered (numbered) or unordered (bulleted). Ordered Lists Ordered lists or numbered lists are used to group items and present them with order or arrangement through numbers or letters (alphabetically). The default sequence used in ordered lists are numbers, e.g., 1, 2, 3, … The tag displays an ordered list with list items using the tag  The tag gives us a way of changing its displayed sequence. Again, the default is numbers. Changing the type of a sequence may be done by adding the type attribute and specifying the value. Values allowed for the type attribute are A,a,I,i and 1(default) Unordered Lists Unordered lists or bulleted lists may display contents without a sequence. It presents its list with bullets. The default used bullet is a shaded circle or disc ( ). The tag displays an unordered list with list items using the tag.  To change the type of bullet used by the ul tag, add the type attribute with the corresponding value. The values allowed for the type attribute are disc (default), circle (without a shade), square (shaded), and none (no bullets). Lesson 4: Dealing with Form Elements The Form Elements The HTML forms use different elements to accommodate different ways of inputting in a form. This lesson will discuss each element and its use in a form, such as radio buttons, combo boxes, checkboxes, etc  Tag To contain all form elements, we use its unique tag, the tag. All form elements should be within the tag to include its data to the server. Some of the attributes we use in a tag are: Method – method attribute accepts either of two values, POST and GET It specifies the type of method of how the form's data will be sent to the server. The GET method transfers data to the URL. Meanwhile, the POST method transfers data using the HTTP. Data transferred using the POST method are hidden from the user, of which it is advisable to be used when dealing with sensitive information. Action – it sets the URL to which the data will be sent. Often, the action attribute is set to a PHP file that would process the data A element may look like this: Listed below are the form elements that may be used in an HTML form: Example:  The tag uses the for attribute to determine which element uses that label. Bear in mind that the value equated with for attribute is the other element’s id. All elements in a form must carry a name attribute. The purpose of this is to set its name, which will be the reference when the data is sent from the form to the server.  The tag contains tag inside. These tags specify the options available in the selection. Each tag may have the value attribute. This value attribute will be the data sent to the server. If an tag does not have the value attribute, the text between the element will be its value. The selected attribute is a minimized attribute that determines which of the option tags are to be shown or selected upon the initial load of the web page. The tag’s size is defined using the cols and rows attribute. Multiple lines are accepted in a