HTML/CSS Training Course Outline

Overview:

• What is html5 & how to use?
• What is Css3 & how to use?
• What is Bootstrap v4 & how to use?
• What is Jquery & how to use?

Editing and Viewing HTML:

• Opening a Web Page in Notepad
• Adding the Data File Location to the Favorites List
• Opening a File from Windows Explorer
• Previewing a Web Page in a Web Browser
• Making, Saving, and Viewing Changes

Setting Up the Document Structure:

• Specifying the Document Type
• Creating the HTML, Head, and Body Sections
• Creating Paragraphs and Line Breaks
• Specifying a Page Title and Metatags
• Publishing a File to a Server

Formatting Text by Using Tags:

• Creating Headings
• Applying Bold and Italic Formatting
• Applying Superscript and Subscript Formatting
• Using Monospace and Preformatted Text
• Formatting a Block Quotation.
• Configuring View Settings in Internet Explorer

Define Lists and Backgrounds:

• Creating Bulleted and Numbered
• Nesting Lists.
• Changing the Bullet or Number Character
• Specifying the Start of a Numbered List
• Creating Definition Lists
• Inserting Special Characters
• Inserting Horizontal Lines
• Choosing Background and Foreground Colors
• Specifying Colors.
• Applying a Background Color
• Applying a Foreground Color
• Specifying a Background Image File

Creating Hyperlinks and Anchors:

• Hyperlinking to a Web Page
• Using Partial Paths and Filenames
• Using Relative and Absolute Paths.
• Setting a Target Window
• Hyperlinking to an E-Mail Address.
• Creating and Hyperlinking to Anchors
• Hyperlinking to Other Content

Cascading Style Sheets and Graphics:

• Introduction to Style Sheets
• Understanding Styles
• Constructing Style Rules
• Creating Styles for Nested Tags
• Creating Classes and IDs for Applying Styles
• Applying Styles to Hyperlinks.
• Creating and Linking to External Style Sheets

Formatting Text by Using Style Sheets:

• Specifying a Font Family
• Specifying a Font Size and Color
• Applying Bold and Italics
• Applying Strikethrough and Underlining
• Creating Inline Spans
• Adjusting Spacing between Letters

Formatting Paragraphs by Using Style Sheets:

• Indenting Paragraphs.
• Applying a Border to a Paragraph
• Specifying a Border Style
• Setting Border Padding
• Specifying Border Width and Color
• Formatting Border Sides Individually
• Setting All Border Attributes at Once
• Specifying the Horizontal Alignment of a Paragraph
• Specifying Vertical Space within a Paragraph

Displaying Graphics:

• Selecting a Graphics Format
• Preparing Graphics for Web Use
• Inserting Graphics.
• Arranging Elements on the Page
• Controlling Image Size and Padding
• Hyperlinking from Graphics
• Using Thumbnail Graphics.
• Including Alternate Text for Graphics
• Adding Figure Captions

Creating Navigational Aids:

• Planning Your Site’s Organization
• Creating a Text-Based Navigation Bar
• Creating a Graphical Navigation Bar
• Creating an Image Map
• Redirecting to Another URL
• Creating Division-Based Layouts
• Understanding HTML5 Semantic Tags
• Beginning to Think in Divisions
• Creating Divisions
• Creating an HTML5 Semantic Layout
• Positioning Divisions
• Floating a Division to the Right or Left
• Positioning a Division on the Page .
• Formatting Divisions

Creating Tables:

• Creating a Simple Table
• Specifying the Size of a Table
• Specifying the Width of a Column
• Merging Table Cells
• Using Tables for Page Layout

Formatting Tables:

• Applying Table Borders
• Applying Borders by Using Attributes
• Applying Borders by Using Styles .
• Applying Background and Foreground Fills
• Changing Cell Padding, Spacing, and Alignment .
• Setting Cell Padding
• Setting Cell Spacing
• Setting Horizontal and Vertical Alignment

Creating User Forms:

• Creating a Basic Form
• Creating a Text Box.
• Special Field Types for E-Mail and Web Addresses
• Creating a Text Area
• Creating a Submit or Clear Button
• Adding Default or Placeholder Text
• Creating Check Boxes and Option Buttons.
• Creating Lists
• Additional Input Types in HTML5
• Understanding CGI and Other Advanced Tools

Incorporating Sound and Video:

• What’s New with Audio and Video in HTML5?
• HTML Multimedia Basics
• Multimedia Formats and Containers
• Codecs: Decoding the Video and Audio
• Which Format to Choose?
• File Size and Quality
• Encoding Video
• Embedding Video Clips
• Introducing the Tag
• The Tag: Your Fallback Plan
• Placing a Video Clip on a Web Page
• Incorporating Audio on a Web Page
• Playing Audio with the Tag
• Playing Audio in Older Browsers
• Placing an Audio Clip on a Web Page

Build a Standard Page: Projects 

• Fantastic Projects
• CSS Grid Standard Layout
• Image Hover Effect
• Define Flexbox
• Diamond Grid Style
• Define Blur effect in Landing Page
• Responsive Web Design
• Build a Unique Login Form
• Build Unique Shapes in Css
• Dropdown Menus

آنچه درباره دوره وب مستر باید بدانیم

از HTML و CSS برای ساخت و طراحی صفحات وب استفاده می ‌شود. HTML مخفف عبارت Hyper Text Markup Language به معنی زبان نشانه‌ گذاری ابر متن است و CSS مخفف عبارت Cascading Style Sheets است. HTML مسئولیت تعریف ساختار و اجزای اصلی صفحات وب را بر عهده دارد. با استفاده از تگ‌ ها و عناصر مختلف در HTML، می ‌توانید عنوان‌ ها، پاراگراف ‌ها، تصاویر، لینک‌ ها و دیگر اجزای مورد نیاز را در صفحه وب تعریف کنید. CSS مسئولیت طراحی و استایل‌ دهی به صفحات وب را بر عهده دارد. با استفاده از CSS، می‌ توانید رنگ، فونت، اندازه و موقعیت المان ‌های HTML را کنترل کنید. CSS اجازه می دهد تا ظاهر وب سایت را به صورت جداگانه از ساختار آن تعریف کرده و تغییرات ظاهری را به صفحات وب اعمال کنید. در دوره HTML و CSS، برای شروع، مفاهیم و اصول اساسی HTML مانند تگ‌ ها و عناصر بلاک را فرا خواهید گرفت. سپس با CSS آشنا می ‌شوید و نحوه استفاده از ویژگی ها برای طراحی و استایل دقیق صفحات وب را آموزش خواهید دید. با ترکیب این دو زبان، می‌ توانید صفحات وب زیبا، قابل خواندن و قابل دسترس بسازید. دانش در زمینه HTML و CSS، اساسی برای توسعه وب است و شروع خوبی برای ورود به دنیای برنامه نویسی وب محسوب می‌شود.

 (Hyper Text Markup Language) HTML چیست؟

 HTML مخفف "Hyper Text Markup Language" است. HTML زبان نشانه گذاری استاندارد برای صفحات وب است. در واقع عناصر HTML بلوک های سازنده صفحات HTML هستند و این عناصر با تگ های <> نشان داده می شوند. HTMLدر کنار CSS برای ساخت صفحه ‌های وب به کار می رود. همچنین HTML زبانی برای توصیف ساختار صفحه‌ های وب است. دستورالعمل ‌های این زبان، Tag "برچسب" نام دارند که محتوای یک صفحه وب با آن ‌ها، نشانه ‌گذاری شده و بدین ‌ترتیب، نحوه نمایش آن صفحه برای مرورگر های وب، توصیف می ‌شود. تاکنون ۵ نسخه از HTML عرضه شده ‌است. هر یک از برچسب ‌های HTML، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می ‌گذارند. به عنوان مثال، برچسب ‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر، در HTML تعریف شده اند. HTML زبان برنامه نویسی نیست و اساساً برای بهبود ساختار اطلاعات و جداسازی اجزای منطقی یک نوشتار (نظیر عنوان‌ها، تصاویر، فهرست‌ها، بندها و جداول) به کار می ‌رود.

  (Cascading Style Sheets) CSS چیست؟

 CSS مخفف عبارت Cascading Style Sheets است. CSS نحوه نمایش عناصر HTML را توضیح می دهد. زبان CSS یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. همچنین CSS یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML ،SVG و XUL نیز به خوبی پشتیبانی می نماید. در کدنویسی با استفاده از CSS می‌ توانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید. CSS روشی ساده برای نمایش چیدمان و جلوه‌ های تصویری (مانند نوع قلم، رنگ و اندازه‌ ها) در صفحه ‌های وب است.