Developing Websites — Open College Network Northern Ireland Vocationally-Related Qualification Dance & Performing Arts Revision

    This element introduces learners to the fundamentals of planning, creating, and publishing basic web pages. It covers essential skills in structuring conte

    Topic Synopsis

    This element introduces learners to the fundamentals of planning, creating, and publishing basic web pages. It covers essential skills in structuring content with HTML and applying visual formatting with CSS, culminating in making web pages accessible on the Internet or a local intranet. Practical activities develop digital creativity and technical understanding required for entry-level roles in digital media.

    Key Concepts & Core Principles

    Exam Tips & Revision Strategies

    Common Misconceptions & Mistakes to Avoid

    Examiner Marking Points

    Developing Websites

    OPEN COLLEGE NETWORK NORTHERN IRELAND
    vocational

    This element introduces learners to the fundamentals of planning, creating, and publishing basic web pages. It covers essential skills in structuring content with HTML and applying visual formatting with CSS, culminating in making web pages accessible on the Internet or a local intranet. Practical activities develop digital creativity and technical understanding required for entry-level roles in digital media.

    9
    Learning Outcomes
    16
    Assessment Guidance
    17
    Key Skills
    9
    Key Terms
    17
    Assessment Criteria

    Assessment criteria

    OCN NI Level 1 Certificate in Creative Arts and Digital Technologies
    OCN NI Level 3 Certificate in Creative Arts and Digital Technologies
    OCN NI Level 2 Certificate in Creative Arts and Digital Technologies
    OCN NI Level 3 Diploma in Creative Arts and Digital Technologies

    Topic Overview

    The OCN NI Level 1 Certificate in Creative Arts and Digital Technologies in Dance & Performing Arts introduces students to the fundamental skills and knowledge required for a career in the performing arts industry. This qualification covers key areas such as dance techniques, performance skills, and the use of digital technologies in creative productions. Students will explore different dance styles, including contemporary, ballet, and street dance, while learning how to apply digital tools for choreography, recording, and editing performances.

    This certificate is designed to build confidence and creativity, preparing students for further study or entry-level roles in dance, theatre, or digital media. By combining practical dance training with digital technology skills, learners gain a unique edge in today's evolving arts landscape. The course emphasizes teamwork, self-expression, and technical proficiency, ensuring students can contribute effectively to group performances and individual projects.

    Understanding this qualification is crucial for students aiming to progress to Level 2 or 3 courses in performing arts or digital media. It also provides a solid foundation for apprenticeships or employment in areas such as dance instruction, event production, or content creation. Mastery of these topics demonstrates a student's ability to blend artistic talent with technological literacy, a highly valued skill in the creative industries.

    Key Concepts

    Core ideas you must understand for this topic

    • →Dance Techniques: Mastery of basic movements in styles like contemporary, ballet, and street dance, including posture, alignment, and rhythm.
    • →Performance Skills: Developing stage presence, expression, and the ability to engage an audience through movement and storytelling.
    • →Digital Technologies: Using software and hardware for choreography planning, recording performances, and editing video/audio content.
    • →Health and Safety: Understanding warm-up routines, injury prevention, and safe use of equipment in dance and digital production.
    • →Collaboration: Working effectively in groups to create and present a cohesive performance, including giving and receiving constructive feedback.

    Learning Objectives

    What you need to know and understand

    • Identify the main components of a web page layout
    • Use basic HTML tags to structure text and images
    • Apply simple CSS rules to format web content
    • Create a functional multi-page website with navigation
    • Upload web files to a hosting platform or intranet folder
    • Test published web pages for functionality and link accuracy
    • Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
    • Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
    • Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.

    Assessment Criteria

    Key criteria assessors look for in your portfolio

    • Award credit for production of a planning document such as a wireframe or sitemap
    • Assess correct semantic use of headings, paragraphs, and image tags in HTML
    • Look for consistent visual styling across pages using an external stylesheet
    • Check that all navigation links work and pages are connected correctly after publishing
    • Reward inclusion of basic accessibility considerations (e.g., alt text for images)
    • Award credit for demonstrating the use of semantic HTML5 elements to create a logical document structure.
    • Credit should be given for external CSS stylesheets that separate presentation from structure, including responsive design techniques.
    • Evidence of using software tools (e.g., image editors, code editors) to prepare assets, such as resizing images and optimising file formats.
    • Assessors should look for a successfully published website on a web server, with all links and media functioning correctly.
    • Award credit for demonstrating consistent use of semantic HTML5 elements (e.g., <header>, <nav>, <section>) to structure web pages logically.
    • Evidence of applied CSS for layout control (e.g., Flexbox/Grid), custom fonts, and colour schemes that align with a specified creative brief.
    • Appropriate use of image-editing or graphic software (e.g., Adobe Photoshop, GIMP) to resize, crop, and optimise visuals for web delivery.
    • Successful publication of the website via a reliable hosting method (e.g., FTP, cloud hosting) with all internal and external links functioning correctly.
    • Award credit for demonstrating correct syntax and semantic markup in HTML structure.
    • Look for evidence of external or internal CSS applied consistently to achieve a specified visual design.
    • Assess the appropriate use of software tools (e.g., image editors, media compressors) to prepare content for web use, with justifications.
    • Check for successful publication of the website to a hosting platform, including evidence of testing across browsers/devices.

    Assessment Guidance

    Guidance for achieving higher grades

    • 💡Always test your website thoroughly before final submission to catch broken links or missing images
    • 💡Keep your code clean and well-commented to help assessors follow your logic
    • 💡Follow the assignment brief closely and use a checklist to ensure you meet all requirements
    • 💡Back up your work regularly and save all files in an organised folder structure
    • 💡Always start with a wireframe or site map to plan the structure before coding, which demonstrates a systematic approach.
    • 💡Comment your HTML and CSS to explain design decisions, as examiners value clear documentation.
    • 💡Use a code editor with syntax highlighting and validation tools to catch errors early.
    • 💡Keep a test log documenting how you checked the site’s functionality on different devices and browsers.
    • 💡Validate your HTML and CSS using W3C validators to ensure compliance with web standards.
    • 💡Plan your site thoroughly with wireframes and a sitemap before coding; this demonstrates a methodical workflow and earns higher marks.
    • 💡Validate your HTML and CSS using W3C tools during development to catch errors early and show attention to web standards.
    • 💡Document your process step-by-step—including screenshots of software tools in use—as portfolios or evidence often require written commentary.
    • 💡For task-based assessments, maintain a clear log of actions, including screenshots of code and software settings, to demonstrate your workflow.
    • 💡Always validate your HTML and CSS using W3C validators to catch errors early; mention this in your evidence.
    • 💡When publishing, document fully the steps taken: from selecting a host to configuring FTP, and show post-launch testing in multiple browsers.
    • 💡In written explanations, link design choices to user experience and accessibility standards (e.g., alt text, colour contrast).
    • 💡Tip 1: Always warm up properly before practical assessments. Examiners look for evidence of safe practice, so include a structured warm-up in your performance routine.
    • 💡Tip 2: When using digital technology, ensure your final edit tells a clear story. Use transitions and effects purposefully, not just for decoration.
    • 💡Tip 3: In group performances, show that you can adapt to others. Make eye contact, stay in sync, and respond to cues – this demonstrates teamwork and professionalism.

    Common Mistakes

    Common errors to avoid in your coursework

    • Using absolute file paths for local resources causing broken links when published
    • Forgetting to close HTML tags, leading to layout issues
    • Applying inline styles repeatedly instead of using a separate CSS file
    • Neglecting to test the website on different browsers or devices
    • Using non-semantic tags like <div> for navigation or headers instead of <nav> or <header>, reducing accessibility.
    • Embedding styles inline or within the HTML document instead of linking an external CSS file.
    • Uploading unoptimised high-resolution images, leading to slow load times.
    • Forgetting to set appropriate file permissions on the server, causing broken media or access errors.
    • Overlooking cross-browser testing, resulting in layout issues in different environments.
    • Neglecting to compress images before embedding, leading to slow page load times and poor user experience.
    • Using inline styles or deprecated HTML attributes instead of maintaining a separate, well-organised CSS stylesheet.
    • Overlooking responsive design, resulting in layouts that fail on mobile devices or different screen sizes.
    • Uploading site files to the wrong directory or failing to set correct file permissions, causing the site not to display.
    • Confusing structural HTML with presentational elements; using deprecated tags instead of CSS for styling.
    • Overlooking responsive design principles, resulting in sites that do not adapt to mobile devices.
    • Uploading unoptimised media files that slow down page loading times.
    • Publishing without testing, leading to broken links or missing assets on the live server.
    • Misconception: Dance is only about natural talent, not learned technique. Correction: While talent helps, consistent practice of proper technique is essential for improvement and injury prevention.
    • Misconception: Digital technology in performing arts is just about filming. Correction: It also involves editing, sound design, lighting control, and using apps for choreography notation and rehearsal planning.
    • Misconception: You need expensive equipment to succeed. Correction: Many digital tools are free or low-cost, and basic smartphones can be used for recording and editing with appropriate apps.

    Frequently Asked Questions

    Common questions students ask about this topic

    Before You Start

    Prior knowledge that will help with this topic

    • •Basic understanding of rhythm and movement (e.g., from school PE or dance clubs).
    • •Familiarity with using a smartphone or tablet for recording video.
    • •No formal dance training required, but a willingness to learn and participate is essential.

    Key Terminology

    Essential terms to know

    • Web page planning
    • HTML structure
    • CSS formatting
    • File management
    • Publishing processes
    • Basic web design
    • Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
    • Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
    • Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.

    Ready to learn?

    AI-powered learning tailored to this unit

    Related Topics in OPEN COLLEGE NETWORK NORTHERN IRELAND vocational Dance & Performing Arts

    Film and Video Production

    View Topic

    Film and Video Production

    View Topic

    Assist With Event Organisation

    View Topic

    Capturing and Editing Audio Sequences

    View Topic