Posts

Showing posts from February, 2018

Make CNN.com Layout

Image
Title : Create CNN Layout using CSS/HTML (do not use Bootstrap) Create  cnn.com layout, focus on overall look & feel e.g. paddings, borders, colors, margins, font family, hover effects, font-size, section headings etc. of different widgets. You don't need to use all content and images to make as-is website, select a few news text and images as sample and feel free to use them in different sections, repeatedly. You must write all CSS and HTML by your own, do not copy CSS styles from CNN website. Take care of following points: Navigation bar and logo placement. Make all horizontal sections e.g. 3 columns of different widths, 3 columns of same width, 4 columns section (same and different width, both), "In Case You Missed It" section, footers (6 columns footer and last footer). Padding and margin of headings of different sections, links, images and contents should look as on cnn.com Display text above the images using positioning, tranparency properties. Your wor...
12 comments
Read more

Task 4 - Styling Forms

Image
Updated on: Mar. 4, 2024 This is Lab Task to practice basic CSS properties. Save below code in form.html file and define CSS styles in head section such that the form shall look as per attached image i.e. form.png. Do not use 'br' tag for spacing but use margins etc. Try to keep the code size minumum to create required user interface (UI), so use selectors most effectively to achieve this target. Style guideline image is also attached i.e. form-help.png, please use it to decide what CSS properties shall be applied on which elements. <!doctype html> <html> <head> <style> /* define all styles here */ </style> </head> <body> <div id="container"> <h1> Student Registration Form </h1> <form method="GET" action="register.jsp"> <div class="userinput"> <label> First Name </label> <input type="text" name="firstName...
Post a Comment
Read more

Task 3 - New Input Types, Embed Audio/Video and Use iframe

3.1  Create an Employee Registration Form with basic attributes e.g. name, gender, email, street address, city and country, etc. Choose appropriate input type for each field.  HTML5 introduced some new input types e.g. datetime, range, email, url, search, tel, color, etc. Update form by adding moew fields that make use of new input types. Also explore and make use of some attributes of input fields e.g. required, placeholder, value, etc.
Post a Comment
Read more

Task 2 - Explore Website Statistics and Create a Blog

2.1 See Website Statistics Open https://www.similarweb.com and see statistics of different websites. You must understand following parameters / type of data: Engagement: Total Visit (per month), page views per visit, average visit duration, bounce rate, etc. Traffic by Country Traffic Sources (Direct, Referral, Search, Social, Display)  Competitors & Similar Sites 2.2 Create a Blog Now a days, many people make living by blogging on topics that other people want to read or search at search engines. Some users publish content not for purpose of earning but just to share their knowledge, inspirations or creations with others. Blogging is a process of publishing content on our personal website (such website is called a blog). As web technologies student, you must know how to create a blog and how to publish contents on your blog. So, follow below given steps: Visit http://blogger.com . Login with your gmail account and create a blog. You only need to enter blog ti...
Post a Comment
Read more

Task 1 - HTML Basics

1.1  Make a web page i.e. about-me.html about yourself with following information: Describe yourself very briefly using maximum 3 lines, use 'p' tag. Write your name as heading using 'h1' tag, on top of the page. In small braces, write the meaning of your name. Add your picture using 'img' tag, set width to 300px, under 'alt' attribute write your name. You may choose any reasonable picture from your PC or web URL (if you don't have yours). Using 'ol' tag, list at least three things that you stand for or what makes you passionate. Things that you would love doing in your life (irrespective of the financial reward). Using 'ul', list at least your 4 MAJOR skills that you believe you are very good at: programming, story telling, designing, telling jokes, making friends, making enemies, or whatever you think ...  Use two 'h2' level headings for 'Matriculation or O/Levels' or "Intermediate / A-Levels". Wri...
Post a Comment
Read more