Learn HTML

Learn to Use HTML for Web Design

Web Development4.8(63)9h 51m41 lectures12 sections

What you'll learn

  • Learn the basics of HTML, Tags and Attributes
  • Create links and format text
  • Write CSS in its three ways
  • Add images, tables and lists
  • Lay out pages with DIV and iframe
  • Design forms and the types of Input
  • Play video and audio inside the page
  • Use Bootstrap
  • Publish websites on the internet

About this course

This course teaches HTML for designing web pages and building websites from scratch. It starts with an introduction to the internet, the tools for writing HTML and setting up NetBeans, then the basics of Tags and Attributes, links, text formatting, the ways of writing CSS, adding images, and tables and lists. After that it explains page Layout and styling with DIV and iframe, then the form and Input and connecting it to programming, SVG and the Canvas, and playing video and audio inside the page. Then it covers ready-made CSS, Bootstrap, an introduction to JavaScript and jQuery, and HTML templates, and it ends with publishing websites on the internet. The course suits beginners and anyone who wants to design a website on their own, and it needs no previous experience. When you finish, you will be able to build a complete web page with HTML and CSS, design sign-up forms, add images and video, use Bootstrap, and publish your website on the internet. The course presents every topic through hands-on practice, so you build your own pages as you follow along and check the result of every step.

Expected outcomes

  • Comprehensive understanding of web design and development using HTML and CSS.
  • Ability to design interactive and attractive web pages.
  • Effectively handle multimedia and ready-made templates.
  • Format pages using advanced tools like Bootstrap.
  • Publish and manage websites online.

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.
4.8
★★★★★
63 reviews
5★
54
4★
8
3★
1
2★
0
1★
0
  • ★★★★★حنان ت.·منذ 3 أسبوعشاهد 90٪
  • ★★★★★رضا ع.·منذ 2 شهرشاهد 100٪
  • ★★★★★Baraa E.·منذ 3 شهرشاهد 51٪

    perfection.

  • ★★★★★Abdulgader A.·منذ 5 شهرشاهد 88٪

    من اجمل الدورات وذات شرح مميز وسهل

تم عرض كل التقييمات (4)

Course content

1

Code Writing Tools and Features

6 lectures
  1. Course SnippetsOverview of the HTML course contents: pages, links and file downloads, iframe, document properties, forms, drawing, video and audio, page layout, ready-made templates, and publishing the site online.11:29
  2. IntroductionIntroduces the HTML course and its contents: document basics, paragraphs, headings and attributes, links and iframe, forms, drawing, video and audio, page layout, ready-made templates, and publishing the site.12:42
  3. Introduction to the Internet and HTMLSets the stage for HTML by discussing the Internet, its applications and importance, explaining that HTML is the basic form of web pages, and outlining the roles of CSS, Bootstrap and jQuery in page design.20:34
  4. HTML Writing Tools and Creating a FileExplains that an HTML file is a text file containing special tags, that it can initially be written in a simple text editor, the need for the html extension and closing every tag, then opening the file in the browser.10:09
  5. Setting Up NetBeans and the Work EnvironmentExplains downloading, installing and running NetBeans, then creating a new HTML file with its basic structure of html, head and body, and using the editor's tag suggestions such as h1.7:33
  6. Basics of Tags and AttributesExplains the basics of HTML tags and attributes: tags open and close, can be nested, line breaks in the file don't show unless a tag is used, and how to write comments.9:54
2

Language Basics

7 lectures
  1. Basics of HTML, Attributes, and Important TagsContinues HTML basics: attributes such as id, name and style, the heading tags h1 to h6 and their differing sizes, and the hr horizontal line tag, encouraging hands-on practice.16:47
  2. Links and Their Types in HTMLExplains links in HTML: creating a sub-page and linking to it from the home page, linking to an external site, controlling how the link opens, and anchors that jump within the same page.14:09
  3. Anchors and Download LinksExplains links that jump to sections within the same page using href with id to build a one-page site, linking to a file, setting the target, and creating a Download link.21:27
  4. HTML Formatting and Basic StylesExplains text formatting in HTML with ready-made tags such as mark for highlighting, then applying colors and fonts with the style attribute, including applying a style to the whole page and noting its drawbacks.11:24
  5. Ways to Write CSS (Inline – Internal – External)Explains three ways to write CSS: Inline inside the tag itself, Internal in a style tag within the page, and External in a separate file linked with the link tag.23:08
  6. Adding Images in HTML and Controlling Their SizeExplains adding an image to an HTML page with the img tag and src attribute, the image path, keeping images in a dedicated folder, and controlling the image width and height.8:32
  7. Tables and Lists in HTMLExplains creating HTML tables with rows and columns and styling them with a border, then unordered and ordered lists and the different numbering types for ordered lists.19:10
3

Page Formatting

5 lectures
  1. Introduction to Layout and Page DesignExplains page layout in HTML using a table, dividing the page into cells for logo, menus and content, and adjusting width, borders, images and colors with styles.16:46
  2. Practical Application of Layout and Building a Complete PagePractical page layout application: editing menu texts and page links, keeping colors consistent across pages, replacing an image with a text paragraph inside a cell, and leading into another design technique.10:41
  3. Page Layout Using DIVExplains dividing and laying out a page with the div tag as an alternative to tables, including coloring sections, placing some side by side, and applying styles through classes.18:32
  4. Page Layout Using iframeExplains the iframe tag as a page layout method: showing a page inside a frame with src and size attributes, then making links open inside the frame by giving it a name and setting target.9:54
  5. Adjusting Page PropertiesContinues website layout by setting page-level properties, including a base link so only the page name is needed in links, and showing a fallback message when JavaScript is disabled, leading into forms.20:42
4

Using Templates

5 lectures
  1. Introduction to HTML FormsIntroduces HTML Forms where users enter data, why the form tag matters for sending its components to the programming side, and form components such as fields, buttons and radio options.8:59
  2. Designing Forms and Basic Input TypesExplains designing an HTML form inside a table to align its fields, and adding basic input types such as text, submit button, color and date, plus the importance of the submit control and the name attribute.12:09
  3. Advanced Input TypesContinues form input types such as search, color and date, styling the form itself, wiring a button to a JavaScript function, and explaining the roles of HTML, CSS, Bootstrap and server-side programming in a site.16:05
  4. Submit, Action, and Linking Forms to ProgrammingExplains connecting a form to server-side code through the action attribute: pressing the Submit button calls a program file that receives the form data, with a quick look at some input attributes.19:01
  5. Advanced Forms Post/Get/ActionExplains the difference between the Get and Post methods for sending form data via the method attribute, how Get shows data in the URL, plus the name attribute, labels and grouping form elements.9:04
5

HTML Graphics Properties

2 lectures
  1. Introduction to SVG and Drawing in HTMLIntroduces drawing in HTML with SVG to draw geometric shapes such as circles and rectangles, setting width, height, coordinates, radius, stroke and fill, with a mention of canvas.14:59
  2. Difference Between SVG and Canvas and Working with JavaScriptCompares SVG and canvas for drawing in HTML, and explains using canvas with JavaScript: selecting the element by id, drawing a line with coordinates, changing the drawing on a button click, and why ready-made libraries are used.15:14
6

HTML Multimedia

4 lectures
  1. Playing Video in HTMLExplains showing multimedia in HTML and playing a video file with the video tag, setting size, controls and the file source, autoplay, then leading into audio playback.10:54
  2. Playing Audio and Using ObjectExplains playing an audio file in an HTML page the same way as video, with control attributes and the file path, then introduces the Object element for embedding different kinds of content in a page.5:10
  3. Using Object to Display Different FilesExplains using the Object tag to display different files such as PDFs and images inside a page, setting the width and height of the area and pointing to the file path.17:14
  4. Playing YouTube Video Inside HTML (iFrame)Explains playing a YouTube video inside an HTML page with the iframe tag, using the embed URL and the video ID, with autoplay and hidden player controls.10:53
7

CSS File

4 lectures
  1. Introduction to CSS and the Importance of Style SheetsIntroduces CSS and the importance of style sheets: the drawback of writing styles inside each page and repeating them, solved by one external style sheet linked to the site's pages, using classes.34:22
  2. Using Ready-made CSS from the InternetShows how to reuse ready-made CSS from websites instead of designing everything from scratch: copying classes into the style file and applying them to page elements such as buttons and forms.9:15
  3. Continuing to Use Ready-made CSS and Form FormattingContinues using ready-made CSS and styling forms, applying styles to input elements by their type and to all tables instead of a class per element, and points to CSS generators.5:20
  4. CSS Generators and Creating Ready-made CodesShows CSS generator websites that let you design a button or form visually and give ready CSS code, which you copy into the page's linked style file and apply to elements.17:01
8

Bootstrap Coordination File

2 lectures
  1. Introduction to BootstrapIntroduces Bootstrap and reviews the CSS styling methods: inline in the element, inside the page, or in an external file with classes for reuse, then the steps to use Bootstrap in a project.9:47
  2. Downloading and Linking Bootstrap to the ProjectExplains downloading Bootstrap, extracting the archive into the project, and linking its style file to an HTML page so its ready-made styles for buttons and forms can be used.30:08
9

HTML & Javascript

3 lectures
  1. Practically Using Bootstrap ComponentsReviews web development split into Web Design and Web Programming, introduces JavaScript as a light language running on the user's side that works with the browser, where to write it, and a welcome message example.11:17
  2. Introduction to JavaScript and Environment SetupIntroduces the basic JavaScript commands used throughout the course examples: showing a message with alert, printing text on the page with document.write, and writing comments.6:26
  3. JavaScript Basics (Variables and Basic Commands)Starts JavaScript fundamentals as a programming language: declaring variables, reading their values from the user, the problem of text being concatenated instead of added, and converting values to numbers before calculating.14:05
10

HTML & jQuery

1 lectures
  1. HTML & jQueryExplains the jQuery library and its idea, downloading its file and linking it to the page, writing code inside a ready function, selecting elements and responding to a click event instead of long plain JavaScript.13:34
11

HTML Templates

1 lectures
  1. HTML TemplatesExplains ready-made HTML templates: downloading a template for a form, a page or a whole website, unzipping and opening it, editing its content and colors and learning from it, instead of building from scratch.22:23
12

Web Site Publishing

1 lectures
  1. Web Site PublishingExplains publishing a website online after designing it: reserving a domain name and hosting space, getting an account and password, then uploading the files to the server with an upload program, leading into server-side programming.14:58

Instructor

Eng. Azab Mohamed Azab

Eng. Azab Mohamed Azab

Lecturer at the Arab Academy for Science, Technology and Maritime Transport, and the Egyptian Ministry of Interior, specializing in technology and information.
68.8K views28 courses

This course is part of the diploma

Related courses