Introduction to HTML PDF

Introduction to HTML What is HTML? HyperText Markup Language structure web pages and web application Links connecting web pages HTML uses tags to mark different elements on a page Created and maintained by W3C (World Wide Web Consortium) The Role of HTML in Web Development To provide the bac...

Introduction to HTML What is HTML? HyperText Markup Language structure web pages and web application Links connecting web pages HTML uses tags to mark different elements on a page Created and maintained by W3C (World Wide Web Consortium) The Role of HTML in Web Development To provide the backbone and structure of a web page. It defines the layout and organization of content on a web page by using a ranked structure of elements. HTML tags allow developers to specify the type of content being displayed and how it should be presented. HTML Editors Text Editors: Basic editors for writing HTML Notepad (Windows) TextEdit (Mac) Code Editors: Offer additional features like syntax highlighting and autocomplete Visual Studio Code Sublime Text Atom Online Editors: Allow writing and testing HTML online CodePen JSFiddle JSBin Basic Structure of an HTML Document DOCTYPE: Declares document type (HTML5) HTML Element: Root element of the page Head: Contains meta-information (like the title) Body: Contains the actual content displayed to the user HTML Elements HTML elements are represented by tags \Heading\, \Paragraph\, \Division\ Opening Tag: \ Closing Tag: \ Self-Closing Tag: \ Nested Elements: Elements inside other elements HTML Attributes Provide additional information about elements. They are always included in the opening tag and consist of a name and a value. Example: In this case, the href attribute defines the destination URL for the hyperlink. Common attributes: href: Used in anchor (\) tags to specify the link destination. src: Used in image (\) tags to specify the image source. alt: Used to provide alternative text for images, which helps with accessibility. HTML Headings HTML uses six levels of headings to organize content Headings are like titles or subtitles, and they range from \ to \ Example: Headings help structure your content and make it easier for users and search engines to understand the hierarchy of information. HTML Paragraphs Paragraphs are used to organize blocks of text. In HTML, paragraphs are defined using the \ tag. Example: Browsers automatically add some space before and after each paragraph to make them visually distinct from other elements. You can have multiple paragraphs in a single page to break up text for better readability. HTML Styles HTML allows you to style elements directly using inline styles, like setting text color or font size with the style attribute. Example: Styling adds visual appeal to your website. While inline styles are useful for quick changes, using CSS in external files is more scalable. HTML Formatting Formatting elements let you emphasize or structure content in special ways, such as making text bold or italic. These elements affect how content looks visually. Bold: \ or \ Italic: \ or \ Superscript: \ Subscript: \ HTML Quotations HTML provides elements for quotations. The \ tag is for longer quotations and the \ tag is for short inline quotes. HTML Comments Comments \ are notes left in the HTML code that are not displayed on the webpage. They are useful for explaining the code to yourself or others. Comments make your code easier to maintain, especially when working with a team or coming back to your project later. HTML Links Create hyperlinks using the \ element. The href attribute specifies the URL the link goes to. You can open links in a new tab using target=\"\_blank\". HTML Images Images are embedded in HTML using the \ tag. The src attribute specifies the image's file path, and the alt attribute provides alternative text for screen readers. HTML Favicon A favicon is a small icon that appears in the browser tab next to the page title. You add it using the \ tag in the head section of the HTML document. Favicons help with branding and allow users to easily identify your website in a list of open tabs or bookmarks. HTML Page Title The page title is set with the \ tag inside the head section. This title is displayed in the browser tab and in search engine results. A clear, concise title helps users understand the content of the page and is vital for SEO. HTML Tables Tables in HTML are created using the \, \, \, and \ elements. They allow you to organize data in rows and columns. HTML Lists Lists are used to group items together. There are two types: ordered lists (\) which are numbered, and unordered lists (\) which use bullet points. Each list item is enclosed in \. Thank you