HTML & CSS ملزمة .pdf

Lectures 2 to 5 Introduction to web design HTML ‫إبتسام عبدهللا المطاع‬.‫أ‬ Fundamentals of Web Design Technologies  ‫تصميم صفحات الويب وتنسيقها‬ Authoring/markup  ‫ هو مصطلح يطلق على عملية تحضير محت...

Lectures 2 to 5 Introduction to web design HTML ‫إبتسام عبدهللا المطاع‬.‫أ‬ Fundamentals of Web Design Technologies  ‫تصميم صفحات الويب وتنسيقها‬ Authoring/markup  ‫ هو مصطلح يطلق على عملية تحضير محتوى صفحة لعرضة على متصفحات‬ ‫ وبشكل توضيحي اكثر هو عبارة مجموعة من الوسوم المكتوبة بواسطة‬.‫الويب‬.‫ والتي تصف المحتوى والوظائف الخاصة بصفحة الويب‬HTML  Authoring is the term used for the process of preparing content for delivery on the Web, or more specifically, marking up the content with HTML tags that describe its content and function. Styling  ‫ في تصميم الويب يتم التحكم بالمظهر العام الخاص بالصفحة الذي تظهر عليه في‬.CSS ‫المتصفحات بواسطة قواعد معينة للتنسيق تكتب بواسطة‬  In web design, the appearance of the page in the browser is controlled by style rules written in CSS (Cascading Style Sheets).  ‫إضافة السكربت للصفحات والبرمجة‬ Scripting and programming  JavaScript is the language that makes elements on web pages do things.  It adds behaviors and functionality to elements in the page and even to the browser window itself. ‫ عبارة عن لغة تجعل العناصر في صفحة الويب تقوم بعمل ما كإضافة سلوكيات‬.‫او ووظائف معينة للعناصر او حتى لنافذة المستعرض نفسها‬  There are other web-related programming languages as well, including PHP, Ruby, Python, and ASP.NET, that run on the server and process data and information before it is sent to the user’s browser. PHP , Ruby, Python ‫يوجد لغات برمجية خاصة بصفحات الويب مثل‬  ‫ بحيث يتم بواسطها‬Server ‫ هذه اللغات البرمجية تعمل على الخوادم‬ASP.net‫و‬.‫معالجة البيانات قبل ان يتم اظهارها في مستعرض المستخدم‬ Frontend Versus Backend Design ‫ هو عبارة عن التصميم الذي يظهر على متصفح الويب وفي هذا‬: Fronted design .‫الكورس سنهتم بهذا الجانب‬  Fronted design: “Frontend” refers to any aspect of the design process that appears in or relates directly to the browser. This course focuses primarily on frontend web design.  The following tasks are commonly considered to be frontend tasks:  Graphic design and image production  Interface design  Information design as it pertains to the user’s experience of the site  HTML document and style sheet development  JavaScript Frontend Versus Backend Design... )Server( ‫ عبارة عن البرامج والسكربتات التي تعمل على الخادم‬Backend design .‫والتي تعطي صفحات الويب ديناميكية وتفاعلية‬  Backend design: refers to the programs and scripts that work on the server behind the scenes to make web pages dynamic and interactive.  The following tasks take place on the backend:  Information design as it pertains to how the information is organized on the server  Forms processing  Database programming  Content management systems  Other server-side web applications using PHP, JSP, Ruby, ASP.NET, Java, and other programming languages HTML editors  Notepad++(Text editor)  TextPad (Windows only). TextPad is a simple and inexpensive plain-text code editor for Windows.  Sublime Text (Window, Mac, Linux)  ….  HTML elements  Before we start adding tags to our document, let’s look at the anatomy of an HTML element (its syntax) and firm up some important terminology.  A generic container element 7  HTML elements...  The browser knows that any text within brackets (< >) is hidden and not displayed in the browser window.  The tags added around content are referred to as the markup.  One last thing…capitalization. In HTML, the capitalization of element names is not important. So , , and are all the same as far as the browser is concerned. 8  HTML Attributes  Attributes provide additional information about HTML elements.  HTML elements can have attributes  Attributes provide additional information about an element  Attributes are always specified in the start tag  Attributes come in name/value pairs like: name="value" 9 Basic document structure 10  Basic document structure 1) It is a document type declaration (also called DOCTYPE declaration) that identifies this document as an HTML5 document. 2) The html element is called the root element because it contains all the elements in the document, and it may not be contained within any other element. 3) The head element contains descriptive information about the document itself, such as its title, the style sheet(s) it uses, scripts, and other types of “meta” information. 11  Basic document structure... 4) The meta elements within the head element provide information about the document itself. 5) Also in the head is the mandatory title element. According to the HTML specification, every document must contain a descriptive title. 6) Finally, the body element contains everything that we want to show up in the browser window. 12  Adding Hidden Comments  You can leave notes in the source document for yourself and others by marking them up as comments. Anything you put between comment tags () will not display in the browser and will not have any effect on the rest of the source. 13  Basic Text Markup  Text is normally placed in paragraph elements  Paragraph Elements  The tag breaks the current line and inserts a blank line - the new line gets the beginning of the content of the paragraph  The closing tag is required in XHTML, not in HTML Greetings from your Webmaster! 14  Basic Text Markup...  Line breaks  The effect of the tag is the same as that of , except for the blank line (in HTML, it could be just ) - No closing tag! 15  Basic Text Markup...  Example of paragraphs and line breaks On the plains of hesitation bleach the bones of countless millions who, at the dawn of victory sat down to wait, and waiting, died  Typical display of this text: 16  Basic Text Markup...  Headings  Six sizes, 1 - 6, specified with to  1, 2, and 3 use font sizes that are larger than the default font size  4 uses the default size 5 and 6 use smaller font sizes 17  Aidan’s Airplanes (h1) The best in used airplanes (h2) "We’ve got them by the hangarful" (h3) We’re the guys to see for a good used airplane (h4) We offer great prices on great planes (h5) No returns, no guarantees, no refunds, all sales are final (h6) 18 Basic Text Markup...  - Blockquotes  Content of  To set a block of text off from the normal flow and appearance of text Welcom to web design 19  Basic Text Markup...  - Font Styles and Sizes (can be nested)  Emphasis - (often set in italics)  Strong - (often set in boldface)  Monospace - (often set in Courier) 20  Basic Text Markup...  Use to draw horizontal rules separating major sections of text, or wherever you’d like to see a line across the page. Welcom to web design 21 Summary 22 The HTML Element  The HTML element defines preformatted text.  The text inside a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: 23 HTML Background Colour  The background-color property defines the background color for an HTML element: such as  It can be added into element changes the background color of the howl page.  It can be added into to changes its background color.  ….. 24 HTML Background Colour... 25 HTML Text Formatting Elements  HTML defines special elements for defining text with a special meaning.  Formatting elements were designed to display special types of text:  Bold text – Small and big text  Important text – Deleted text  Italic text – Inserted text  Emphasized text – Subscripts  Marked text – Superscripts 26 HTML Text Formatting Elements...  Bold text – The HTML element defines bold text – Or, we can use element to bold the text 27 HTML Text Formatting Elements...  HTML Italic and Emphasized Formatting:  The HTML element defines italic text  The HTML element defines emphasized text 28 HTML Text Formatting Elements...  Small and big text – It is a way to maximize or minimize the text size. – To minimize the text size use element, and maximize the text size use element. 29 HTML Text Formatting Elements...  HTML Marked Formatting  The HTML element defines marked or highlighted text:  HTML Deleted Formatting  The HTML element defines deleted (removed) text. 30 HTML Text Formatting Elements...  HTML Inserted Formatting  The HTML element defines inserted (added) text. 31 HTML Text Formatting Elements...  HTML Subscript Formatting  The HTML element defines subscripted text.  HTML Superscript Formatting  The HTML element defines superscripted text. 32 Text direction  Right to Left your paragraph  Left to Right Size 3 Size 2 Size 1 41 Font size... Or directly you can choose the font size Size 7 Size 6 Size 5 Size 4 Size 3 Size 2 Size 1 42 Font size...  Another way to maximize or minimize the font by on step is using or (based on the default font size) size 4 size 2 size 5 43 Horizontal Line  Width: to specify the line width such as 19, 293 ,… by pixel or by percentage from the page width such as 20% or 85%  Size: to specify the line height  Color: to specify the line color 44 Add an Image  The src attribute provides the name of the image file that should be inserted, and the alt attribute provides text that should be displayed if the image is not available. Title, align (left-right-top-middle-bottom). Figure, figcaption. 45 List attribute The attribute type used in ordered list and unordered list. (li: List Item) Ordered Lists: Unordered Lists: 1: 1, 2, 3, 4, …. circle, square, disc a: a, b, c, d,…. A: A, B, C, D,.... i: i, ii, iii, iv,.... I: I, II, III, IV,…. 46 List attribute...  Windows (85%) Linux (10%) Mac (3%) Other (2%) Pepsi Crash 7 Up 47  Nested attribute: List attribute… American Companies Microsoft General Motors German Companies Dubian BMW 6 Class 7 Class 48 HTML Block and Inline Elements  Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.  Block-level Elements  A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).  Examples of block-level elements:   -   49 HTML Block and Inline Elements…  Inline Elements  An inline element does not start on a new line and only takes up as much width as necessary.  Examples of inline elements:    50 HTML Block and Inline Elements…  The Element  The element is a block-level element that is often used as a container for other HTML elements.  The element has no required attributes, but style and class are common.  When used together with CSS, the element can be used to style blocks of content: 51 HTML Block and Inline Elements… 52 HTML Block and Inline Elements…  The Element  The element is an inline element that is often used as a container for some text.  The element has no required attributes, but style and class are common.  When used together with CSS, the element can be used to style parts of the text: 53 HTML Block and Inline Elements… 54 Adding links  Generally, the web applications consists of multiple web pages. To navigate between them through the home page you have to link between them.  HTML provides a tag called anchor(a) to makes linking possible. …  Anchor syntax: The simplified structure of the anchor element is: < a href=“url”> linked text or element Adding links  To make a selection of text a link, you have to use the herf attribute (provide the URL of the target page) between the opening and closing (a) tag. Go to Google  To make an image a link, simply put the img element in the anchor element: img src=“google.gif” alt=“Google logo” 56  Adding links  When a user clicks on the below link Go to O’Reilly Media Site the anchor element loads in the browser window the below page 57 The href Attribute  href (hypertext reference) attribute provides the address of the page or resource (its URL) to the browser.  The URL must always appear in quotation marks.  Some times you will need to point to:  other HTML documents  web sources, such as images audio video 58 The href Attribute  Absolute URLs: provide the full URL for the document, including the protocol (http://), the domain name, and the pathname as necessary. Example: href=http://www.oreilly.com/  Relative URLs: describe the pathname to a file relative to the current document. Example: href="recipes/index.html" 59 Linking Within Your Own site  A large portion of the linking you’ll do will be between pages of your own site: from the home page to section pages, from section pages to content pages, and so on.  That is means, in your own site you will use the pathnames instead of using the URL.  Rules to avoid common errors when you use pathname:  Don’t use backslashes (\).  Don’t start with the drive name (D:, C:, etc.).  Don’t start with file:// 60 61 Linking within a directory  If you want to make a link from my home page (index.html) to a general information page (about.html). About the site… 62 Linking to a lower directory  You have to give the browser directions by including the pathname in the URL.  For example: I want to make a link from index.html to a file in the recipes directory called salmon.html. 63 Linking to a lower directory  I want to link from index.html to couscous.html 64 Linking to a higher directory  Which means you want to go back from the bottom (or any where) of the directory up to the directory top level (or any up level).  In this case you will use (../ ).  When you begin a pathname with../, it’s the same as telling the browser “back up one directory level” and then follow the path to the specified file. 65 Linking to a higher directory  If you want to link from salmon.html back to the home page (index.html). 66 Linking to a higher directory  Note that if you want to go back out of two directory levels just use dot-dot-slash twice (../../ ).  Example, going back from couscous.html to index.html. The link would look like this: [Back to home page]  The first../ backs up to the recipes directory; the second../ backs up to the top-level directory where index.html can be found. 67 Linking to a higher directory 68 Linking to a specific point in a page  Sometimes, it is useful to provide a link(s) in the web page to a specific point in a page.  This is useful for a long page, to avoid scrolling page up and down.  Linking to a particular spot within a page is a two-part process:  First, you identify the destination, and then  you make a link to it. 69 Linking to a specific point in a page  In the following example, I create an alphabetical index at the top of the page that links down to each alphabetical section of a glossary page (see next slide).When users click on the letter “H,” they’ll jump down on the page to the “H” heading lower on the page. 70 71 Linking to a specific point in a page  step 1: Identifying the destination: To create a destination, use the id attribute to give the target element in the document a unique name.  Ifyou want users to be able to link directly to the “H” heading, you have to add the id attribute to it and give it the value “startH”. H 72 Linking to a specific point in a page  step 2: Linking to the destination: With the identifier in place, now you can make a link to it.  As for any link, you use the a element with the href attribute to provide the location of the link.  To indicate that you are linking to a fragment, you use the (#) symbol before the fragment name. 73 Linking to a specific point in a page 74 Linking to a fragment in another document  You can link to a fragment in another document by adding the fragment name to the end of the URL (absolute or relative).  For example, to make a link to the “H” heading of the glossary page from another document in that directory, the URL would look like this:  You can even link to specific destinations in pages on other sites by putting the fragment identifier at the end of an absolute URL, like so:  Mail Links  mailto protocol is used to link the mail address and tells the browser to opens a new mail message preaddressed to that address in a designated mail program.  A sample mailto link is shown here: 76  Telephone Links  Keep in mind that the smartphones people are using to access your website can also be used to make phone calls! Why not save your visitors a step by letting them dial a phone number on your site simply by tapping on it on the page?  The syntax uses the tel: scheme and is very simple.  When mobile users tap the link, they get an alert box asking them to confirm that they’d like to call the number. 77  A Window in a Window  iframe element that lets you to embed a separate HTML document or other resource in a document.  You place an inline frame on a page similarly to an image, specifying the source (src) of its content as well as its width and height.  The syntax:......  Web forms may be processed using one of the following technologies:  PHP (.php) is an open source scripting language most commonly used with the Apache web server.  Microsoft’s ASP.NET (Active Server Pages) (.asp) is a programming environment for the Microsoft Internet Information Server (IIS).  Ruby on Rails. Ruby is the programming language that is used with the Rails platform. Many popular web applications are built with it.  JavaServer Pages (.jsp) is a Java-based technology similar to ASP.  Python is a popular scripting language for web and server applications. The method attribute  The method attribute specifies how the information should be sent to the server. For example  When the browser encodes that information for its trip to the server, it looks like this.  If the form method is GET this query string will be sent through the URL, while if the form method is POST it will be sent through the HTTP protocol.  The Element  The element is the most important form element.  The element has many variations, depending on the type attribute. Such as:  text: Defines normal text input  password: just like text except asterisks are displayed, rather than the input characters  radio: Defines radio button input (for selecting one of many choices)  submit: Defines a submit button for submitting forms  checkbox: Defines checkbox (for selecting one or more many choices).  rest: for resetting the form The Element  Text Input  defines a one-line input field for text input: The Element...  Radio Button Input  defines a radio button.  Radiobuttons let a user select ONE of a limited number of choices: 108 The Element...  Input Type: checkbox  defines a checkbox.  Checkboxes let a user select ZERO or MORE options of a limited number of choices. 109 The Element...  The Submit Button  defines a button for submitting a form to a form-handler.  The form-handler is typically a server page with a script for processing input data.  The form-handler is specified in the form's action attribute: 110 The Element... 111 The Element  The element defines a drop-down list:  The name attribute of is required  The size attribute of can be included to specify the number of menu items to be displayed (the default is 1)  Each item of a menu is specified with an tag, whose pure text content (no tags) is the value of the item  An tag can include the selected attribute, which when assigned "selected" specifies that the item is preselected 112 The Element... Size=1 113 The Element... Size=3 114 The Element  The element defines a multi-line input field (a text area)  Usually include the rows and cols attributes to specify the size of the text area 115 The Element  The element defines a clickable button: 116 HTML5 Form Elements  HTML5 added the following form elements:    117 HTML5 Element  The element specifies a list of pre-defined options for an element.  Users will see a drop-down list of pre-defined options as they input data. 118 119 HTML5 Element  The purpose of the element is to provide a secure way to authenticate users.  The element specifies a key-pair generator field in a form.  When the form is submitted, two keys are generated, one private and one public.  The private key is stored locally, and the public key is sent to the server.  The public key could be used to generate a client certificate to authenticate the user in the future. 120 HTML5 Element... 121  HTML5 Element  The element represents the result of a calculation (like one performed by a script). Input type=“number” Input type=“range” 122 HTML5 Element...  If we want to perform calculation such as summation, we would write the below HTML code The step attribute: is new to HTML5. It defines the increment by which a number input increases and decreases. Example step=“5” to increase 5 for every step 123 HTML5 Input Types  HTML5 added several new input types:  color  date – range  datetime – search  datetime-local – tel  email – time  month – url  number – week 124 Input Type: number  The is used for input fields that should contain a numeric value.  You can set restrictions on the numbers. 125 A list of some common input restrictions 126 Input Type: date  The is used for input fields that should contain a date. 127 Input Type: date  You can add restrictions to the input: 128 Input Type: colour  The is used for input fields that should contain a color. 129 Input Type: email  The is used for input fields that should contain an e-mail address. 130 The audio Element  Prior to HTML5, a plug-in was required to play sound while a document was being displayed  Audio encoding algorithms are called audio codecs – e.g., MP3, Vorbis  Coded audio data is stored in containers—e.g., Ogg, MP3, and Wav (file name extension indicates the container, not the audio code)  Vorbis code is stored in Ogg containers  MP3 code is stored in MP3 containers  Wav code is stored in Wav containers The audio Element...  General syntax:... Your browser does not support the audio element The audio Element...  Browser chooses the first audio file it can play and skips the content; if none, it displays the content  Different browsers have different audio capabilities  The controls attribute, which is set to controls", creates a start/stop button, a clock, a progress slider, total time of the file, and a volume slider The audio Element... Your browser does not support the audio element The video Element  Prior to HTML5, there was no standard way to play video clips while a document was being displayed  Video codecs are stored in containers  Video codecs: H.264 (MPEG-4 AVC) – can be stored in MPEG-4 Theora – can be stored in any container VP8—can be stored in any container  Different browsers support different codecs  The width and height attributes set the screen size The video Element...  The autoplay attribute, set to "autoplay", specifies that the video should play as soon as it is ready  The preload attribute, set to "preload", specifies that the video should be loaded as soon as the document is loaded  The controls attribute, set to "controls", is like that of the audio element The video Element... Your browser does not support the video element  Cascading Style Sheet (CSS) ‫إبتسام عبدهللا المطاع‬.‫أ‬ Fundamentals of Web Design Technologies CSS 3 ‫طرق كتابة اكواد‬ : CSS ‫توجد ثالثة طرق لكتابة اكواد‬ Inline CSS Embeded CSS External CSS 5 ‫شيفرات ‪CSS‬‬ ‫‪6‬‬ ‫مالحظات عامة‬ ‫‪7‬‬  ‫ثالثا‪ :‬المقاييس و الوحدات فى ‪CSS3‬‬ ‫‪ ‬المقاييس و الوحدات فى ‪ CSS‬تتم قياس خصائص مثل حجم الخط ‪ ،‬ارتفاع الخط ‪،‬‬ ‫الهامش ‪ ،‬الحشو ‪ ،‬العرض ‪ ،‬االرتفاع ‪ ،‬وغيرها ‪..‬في ‪CSS‬باستخدام وحدات‬ ‫الطول‪.‬هناك أربعة أنواع أساسية من وحدات الطول المستخدمة في ‪CSS‬وهى‪:‬‬ ‫‪.1‬وحدات الطول النسبي ‪Relative Length Units‬‬ ‫‪Absolute Length Units‬‬ ‫‪.2‬وحدات الطول المطلقة‬ ‫‪Angle Units‬‬ ‫‪.3‬وحدات زاوية‬ ‫‪Time Units‬‬ ‫‪.4‬وحدات الوقت‬ ‫‪8‬‬ ‫وحدات الطول النسبي ‪Relative Length Units‬‬ ‫ تحدد وحدات الطول النسبي الطول نسبةً إلى خاصية الطول األخرى‪.‬تتميز الوحدات‬ ‫ذات الطول النسبي بقياس أفضل بين وسائط التقديم المختلفة‪.‬‬ ‫‪Relative‬‬ ‫تابع وحدات الطول النسبي‬ ‫‪Length Units‬‬  ‫‪Absolute Length Units‬‬ ‫وحدات الطول المطلقة‬ ‫وحدات الطول المطلق ثابته وسيظهر الطول المعبر عنه في أي من هذه الوحدات‬ ‫بنفس الحجم بالضبط‪.‬ال ينصح باستخدام وحدات الطول المطلق على الشاشة ‪ ،‬ألن‬ ‫كثيرا‪.‬ومع ذلك ‪ ،‬يمكن استخدامها إذا كانت وسائط اإلخراج‬ ‫ً‬ ‫أحجام الشاشة تختلف‬ ‫معروفة ‪ ،‬مثل تخطيط الطباعة‪.‬‬ Angle Units ‫وحدات زاوية‬ ‫‪Time Units‬‬ ‫وحدات الوقت‬ 14 ‫الفرق بين ) ‪ )id‬و ) ‪( class‬‬ ‫‪15‬‬ 16 CSS Box Model  CSS Box Model Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent ‫ابعاد الصندوق ‪Specifying box dimensions‬‬ ‫الطريقة التقليدية والتي توجد في ‪ CSS1‬هي باستخدام الخاصيتين ‪width and height‬‬ ‫ ‬ ‫للمحتويات الموجودة في ‪. Box‬‬ ‫هذا يعني ان الحجم النهائي هو حجم المحتوى إضافة الى االطار ‪ border‬والمسافة البادئة‬ ‫ ‬ ‫‪. Padding‬‬ CSS Box Model Sizing the Content Box  Specifying box dimensions the box-sizing property in CSS3—applies the width and height values to the border box, which includes the content, padding, and border. 24 ‫اوال‪:‬النصوص ‪Text‬‬ ‫‪25‬‬ ‫النصوص ‪Text‬‬ ‫‪26‬‬ ‫النصوص ‪Text‬‬ ‫‪27‬‬ ‫النصوص ‪Text‬‬ ‫‪28‬‬ ‫النصوص ‪Text‬‬ ‫‪29‬‬ ‫النصوص ‪Text‬‬ ‫‪30‬‬ ‫النصوص ‪Text‬‬ ‫‪31‬‬ ‫ثانيا‪ :‬الخطوط ‪Fonts‬‬ ‫‪32‬‬ ‫الخطوط ‪Fonts‬‬ ‫‪33‬‬ ‫الخطوط ‪Fonts‬‬ ‫‪34‬‬ ‫الحدود والهوامش والحشو‬ ‫‪35‬‬ ‫نموذج الصندوق‪CSS Box Model‬‬ ‫‪36‬‬ 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 ‫التحويالت الهندسية وخصائص‬ ‫الحركة‬ ‫‪61‬‬ ‫التحويالت الهندسية ذات البعدين ‪2D‬‬ ‫‪62‬‬ 63 ‫التحويالت الهندسية ثالثية األبعاد ‪3D‬‬ ‫‪64‬‬ ‫االنتقال المتحرك‬ ‫‪65‬‬ ‫الوسوم الزائفة‬ ‫‪66‬‬ 67 68 69 70 71 72 73 74 75 76 77