Web Programming Techniques PDF

Web Programming Techniques Under the Faculty of Information Technology- International University of Technology Twintech BIT Department...

Web Programming Techniques Under the Faculty of Information Technology- International University of Technology Twintech BIT Department Prepared By Mr. Esam Aljaberi International University of Technology Twintech 2023-2024 1 (Hyper Text Markup Language) 2 Objectives  Images.  HTML Figure & Figcaption Tags.  Lists.  Links.  HTML Block and Inline Elements. International University of Technology 3 Twintech HTML Images :  Images can improve the design and the appearance of a web page.  Images are not technically inserted into a web page; images are linked to web pages.  The tag creates a holding space for the referenced image.  The tag is empty, it contains attributes only.  The tag has two required attributes: 1. Src. 2. Alt. Syntax : International University of Technology 4 Twintech HTML Images : Image Size - Width and Height : You can use the style attribute to specify the width and height of an image in pixels : Alternatively, you can use the width and height attributes : We suggest using the style attribute. It prevents styles sheets from changing the size of images. International University of Technology 5 Twintech HTML Images : - Output : - Output if src is wrong: International University of Technology 6 Twintech HTML Images :  & -  The tag specifies self-contained content, like illustrations, diagrams, photos, code listings.  contains two Attributes two tags, (img src & figcaption ).  Thetag defines a caption for aelement.  The element defines the actual image. Example : Fig1. - Trulli, Puglia, Italy. International University of Technology 7 Twintech HTML Lists : HTML lists allow web developers to group a set of related items in lists. Unordered HTML List : An unordered list starts with the tag. Each list item starts with the tag. The list items will be marked with bullets (small black circles) by default. Example: Output : An unordered HTML list Coffee Tea Milk International University of Technology 8 Twintech HTML Lists : Ordered HTML List : An ordered list starts with the tag. Each list item starts with the tag. The list items will be marked with numbers by default: Example: Output : An unordered HTML list Coffee Tea Milk International University of Technology 9 Twintech HTML Lists : HTML Description Lists : A description list is a list of terms, with a description of each term. The tag defines the description list, the tag defines the term (name), and the tag describes each term: Example: Output : A Description List Coffee - black hot drink Milk - white cold drink International University of Technology 10 Twintech HTML List Tags: Tag Description Defines an unordered list Defines an ordered list Defines a list item Defines a description list Defines a term in a description list Describes the term in a description list International University of Technology 11 Twintech HTML Links - Hyperlinks : - HTML links are hyperlinks which allow users to click their way from page to page., - when you move the mouse over a link, the mouse arrow will turn into a little hand. - A link does not have to be text. A link can be an image or any other HTML element Syntax : The HTML tag defines a hyperlink: link text -The most important attribute of the element is the href attribute, which indicates the link's destination. -The link text is the part that will be visible to the reader, and by clicking on the link text, will send the reader to the specified URL address. International University of Technology 12 Twintech HTML Links - Hyperlinks : By default, links will appear as follows in all browsers: An unvisited link is underlined and blue.- A visited link is underlined and purple. An active link is underlined and red. HTML Links - The target Attribute : By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. _self - Default. Opens the document in the same window/tab as it was clicked. _blank - Opens the document in a new window or tab. Example: Google International University of Technology 13 Twintech HTML Links - Hyperlinks : Use an Image as a Link : To use an image as a link, just put the tag inside the tag: Example: Link to an Email Address : Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email) International University of Technology 14 Twintech HTML Links - Hyperlinks : Creating a download link: A text link of a pdf , doc or zip file can be created to make it downloadable. Example: Download PDF File Link Titles : The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. Example: Google International University of Technology 15 Twintech HTML Links - Hyperlinks : Absolute URLs vs. Relative URLs : absolute URL: External links are using (a full web address) in the href attribute. Example: W3C Google relative URL : local links are using (a page within the same website) is specified with (without the "https://www" part). Example: HTML Images CSS Tutorial 16 HTML Semantic Elements In HTML there are some semantic elements that can be used to define different parts of a web page:        -   International University of Technology 17 Twintech HTML Semantic Elements  :  as the name suggests, it is for the header of a section introductory of a page. There can be multiple headers on a page.  You can have several elements in one HTML document. However, cannot be placed within a , or anotherelement. A element typically contains: - one or more heading elements ( - ). - logo or icon. - authorship information. 18 HTML Semantic Elements  : located at the bottom of any article or document, they can contain contact details, copyright information etc. There can be multiple footers on a page.  :  Specifies independent, self-contained content. It should make sense on its own.  It should be possible to distribute it independently from the rest of the web site. Example: Blog Post, Newspaper Article etc. Note: If your content material contains the date, price, author, description, etc then go for the article tag. International University of Technology 19 Twintech HTML Semantic Elements : According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading." Section tag defines the section of documents such as chapters, headers, footers or any other sections. The section tag divides the content into section and subsections. The section tag is used when requirements of two headers or footers or any other section of documents needed. The main advantage of the section tag is, it is a semantic element, which describes its meaning to both browser and developer. International University of Technology 20 Twintech HTML Semantic Elements  :  is used to define a set of navigation links in the form of navigation bar or nav menu.  provides link for contents either on the same page or any other page.  The links in nav element may points to other webpages or to different sections of same webpage.  The nav tag is reserved for primary navigation areas, like the main menu across the top of the page or section. International University of Technology 21 Twintech HTML Block and Inline Elements : Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline : 1- 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). The element is a block-level element. 22 HTML Block and Inline Elements :  Is used as a container for other HTML elements. It has no required attributes. Style, class and id are the commonly used attributes. When used together with CSS, the element can be used to style blocks of content. Here are the block-level elements in HTML: - International University of Technology 23 Twintech HTML Block and Inline Elements : 2- Inline Elements : An inline element does not start on a new line and it only takes up as much width as necessary. This is a element inside a paragraph. 24 HTML Block and Inline Elements :  : Is an inline container used to mark up a part of a text, or a part of a document, It has no required attributes. Style, class and id are the commonly used attributes. When used together with CSS, the element can be used to style blocks of content.  : Is used to define the abbreviation or short form of an element. The tag is used as shortened versions and used to represented as a series of letters. International University of Technology 25 Twintech HTML Block and Inline Elements : Here are the inline elements in HTML: International University of Technology 26 Twintech