Introduction To HTML PDF

INTRODUCTION TO HTML ISP465: Introduction to Front End Web Development OBJECTIVES To understand the fundamental of HTML. To study the HTML format structured. CONTENT Overview of HTML Elements, Attributes, Character References & Comments Effective HTML Page OVERVIEW FRONT-END DEVELOPMENT A f...

INTRODUCTION TO HTML ISP465: Introduction to Front End Web Development OBJECTIVES To understand the fundamental of HTML. To study the HTML format structured. CONTENT Overview of HTML Elements, Attributes, Character References & Comments Effective HTML Page OVERVIEW FRONT-END DEVELOPMENT A front-end developer creates websites and applications using web technologies (HTML, CSS and JavaScript). You can think of Front-End as client-side and Back-End as server-side. Source: https://frontendmasters.com/guides/front-end-handbook/2018/what-is-a-FD.html FRONT-END DEVELOPMENT VS BACK-END DEVELOPMENT vs Front-end developer Back-end developer Software/Technology and website Manage servers, databases, backend related development with whom Works on logics, and APIs that modern user/client touches or interact at first. applications and websites rely on, as well as any website-related issues. Roles To design according to user/client request. To understand the goal of website. Language Java, Python,.Net, Javascript HTML, CSS, JavaScript.  HTML VS. CSS VS. JAVASCRIPT ANALOGY Source: https://brytdesigns.com/html-css-javascript-whats-the-difference/ OVERVIEW OF HTML HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content  - This is where the page HTML STRUCTURE name is insert as it will appear at the top of the browser window or tab. — This tag specifies the language written on the page. In this case, the language is My First Website HTML 5. It also signals that the start of HTML code. — — This is where all My first heading This is where the metadata for the page the content My first paragraph goes — stuff mostly meant of the page for search engines and goes. other computer programs. HTML The tag defines metadata about an HTML document. Metadata is data (information) about data. tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. HTML  HTML ELEMENT : ATTRIBUTE: NAME, CONTENT EXPLANATION keywords are used by the search engines while indexing your webpage for searching purpose. purpose. Universiti Teknologi MARA - Universiti Teknologi the title tag is the most important tag that tells about the name of the MARA Official Website website and tells what the page is all about. encoding to process Web pages. This is an example to set UTF-8 encoding  HTML: ELEMENTS Open tag Closed tag An HTML element is defined by a starting tag. Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. Most tags must be opened and closed in order to function. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags. There are some HTML elements which don't need to be closed, such as , and elements. These are known as void elements. When using multiple tags, the tags must be closed in the order in which they were opened.  HTML: ATTRIBUTE Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside. All attributes are made up of two parts − a name and a value. The name is the property of the element. The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right. name value HTML: CORE ATTRIBUTE Core Attribute Description id can be used to identify any element on an HTML page in a unique way. There are two main reasons why an element should have an id attribute. If an element has an id attribute as a unique identifier, only that element and its content can be identified. If there are two elements with the same name on a Web page (or style sheet), the id attribute is used to distinguish between them. class is used to associate an element with a stylesheet, and specifies the class of element. title gives a suggested title for the element. style The style attribute allows developer to specify CSS rules within the element. HTML: CORE ATTRIBUTE (EXAMPLE) HTML: CHARACTER REFERENCES HTML character references are short bits of HTML, commonly referred to as character entities or entity codes, that are used to display characters that have special meaning in HTML as well as characters that don’t appear on keyboard. Characters with special meaning in HTML are called reserved characters. For example, left () angle brackets are reserved in HTML to identify the opening and closing tags of elements. Characters that don’t appear on keyboard include things like the copyright symbol (©) and the mathematical value pi (π). In HTML, there are three different ways to format a character entity: character name, a Unicode value, or a number. For example, an ampersand may be displayed using any of the following entities: &, &, or &. HTML: CHARACTER REFERENCES List of character reference -refer to https://dev.w3.org/html5/html-author/charref HTML: COMMENTS Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability. HTML comments are placed in between tags. Any content placed with-in tags will be treated as comment and will be completely ignored by the browser. HTML: COMMENTS  EFFECTIVE HTML PAGE Write in all lowercase: Every tag should be written in lowercase; no uppercase should be used in HTML tags, such as ,. Indentation is essential for readability: Improving readability also reduces development time. Tags at the end: Closing self-closing tags was once required. However, in HTML5, this is optional and entirely up to the developer. Either use it on all tags or leave it out entirely. The key here is consistency. Don't forget to close regular tags as well. Avoid using comments excessively: These can quickly add up and increase the size of an HTML file. As a result, the initial page load speed is slowed, and your users may have to wait. Don’t Use Inline Styles and Scripts: Your document will quickly become cluttered and unreadable otherwise. Place Script tags at the Bottom: Place script tags at the bottom of the document. Officially, script tags live inside the head. But if we place them in the bottom of the document, just before the closing of the body tag, we can delay their download. This allows our document to load in the dom first, show it to the user, and then request the scripts. Only one h1 per page: Only one h1 per page. Put the most important text that describes the page's content there. Using multiple h1 tags on a single page is not always a good idea and is discouraged because it can harm your search engine rankings. The Correct Way to Use Title and Meta Tags: Use a page title and appropriate, descriptive meta tags. These are collected by your local search engine guy and used to index your site. When writing HTML code, only use an HTML editor, not Microsoft Word or any other word processor. To preview your upcoming creation, make sure you've installed a variety of browsers, including Chrome and Firefox.